---
title: 리액트에서 Parse 비밀번호 재설정 구현 방법
slug: docs-kr/react/working-with-users/react-password-reset
description: 리액트 앱에서 Parse를 사용해 비밀번호 재설정 기능을 구현하는 방법을 알아보세요. 컴포넌트 생성부터 이메일 요청까지 자세히 설명합니다.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-19T17:19:27.988Z
---

# 리액트를 위한 사용자 비밀번호 재설정

## 소개

비밀번호를 시스템에 도입하면 사용자가 비밀번호를 잊어버리는 것은 사실입니다. 이러한 경우, Parse 라이브러리는 사용자가 안전하게 비밀번호를 재설정할 수 있는 방법을 제공합니다.
이메일 인증과 마찬가지로, Parse는 이미 이를 위한 구현을 준비해 두었습니다, <font color="#2166ae">`Parse.User.requestPasswordEmail`</font>. 이 방법을 사용하면 Parse가 비밀번호 재설정의 모든 측면을 원활하게 처리합니다.

## 전제 조건

:::hint{type="info"}
이 튜토리얼을 완료하려면 다음이 필요합니다:

-
  리액트 앱이 생성되고 [Back4App에 연결됨](https://www.back4app.com/docs/react/quickstart).
- 이전 가이드를 완료하여 [Parse.User 클래스와 Parse.User.logIn 메서드에 대한 이해를 높이세요.](https://www.back4app.com/docs/react/working-with-users/react-user-login)
- 이 가이드에서 제공하는 화면 레이아웃을 테스트/사용하려면 [<font color="#2166ae">`Ant Design`</font> 라이브러리를 설정해야 합니다.](https://ant.design/docs/react/introduce)
:::

## 목표

Parse를 사용하여 리액트 앱에 사용자 비밀번호 재설정 기능을 추가하는 것입니다.

## 1 - 비밀번호 재설정 이메일 사용자 정의

비밀번호 재설정 요청 후 사용자가 받을 메시지를 사용자 정의할 수 있습니다. <font color="#2166ae">`Parse.User.requestPasswordEmail`</font> 메서드를 호출하기 전에 Parse 앱 대시보드에 로그인하고 설정->검증 이메일로 이동하여 비밀번호 재설정 이메일 제목이나 메시지를 변경하세요. 사용자가 명확한 지침이 포함된 이메일을 받고, 그것이 실제로 귀하의 애플리케이션에서 온 것임을 나타내는지 확인하세요.

![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/Zj719_5Vo1biD1FXjAkqB_image.png)

## 2 - requestPasswordEmail 사용하기

다음과 같이 <font color="#2166ae">`Parse.User.requestPasswordEmail`</font> 메서드를 호출하는 것은 사용자 계정 이메일만 매개변수로 필요하므로, 비밀번호 재설정 구성 요소에 다음 함수를 추가하세요. 사용자 이메일을 위한 텍스트 입력을 구성 요소에 추가하는 것을 잊지 마세요.

:::CodeblockTabs
JavaScript

```javascript
1	const doRequestPasswordReset = async function () {
2	  // Note that this value come from state variables linked to your text input
3	  const emailValue = email;
4	  try {
5	    await Parse.User.requestPasswordReset(emailValue);
6	    alert(`Success! Please check ${email} to proceed with password reset.`);
7	    return true;
8	  } catch(error) {
9	    // Error can be caused by lack of Internet connection
10	    alert(`Error! ${error}`);
11	    return false;
12	  }
13	};
```

```typescript
1	const doRequestPasswordReset = async function (): Promise<boolean> {
2	  // Note that this value come from state variables linked to your text input
3	  const emailValue: string = email;
4	  try {
5	    await Parse.User.requestPasswordReset(emailValue);
6	    alert(`Success! Please check ${email} to proceed with password reset.`);
7	    return true;
8	  } catch(error: any) {
9	    // Error can be caused by lack of Internet connection
10	    alert(`Error! ${error}`);
11	    return false;
12	  }
13	};
```
:::

구성 요소를 테스트하세요. 비밀번호 재설정 이메일을 요청한 후 이메일을 받았는지 확인하세요. 받은 편지함을 확인하세요. 메시지에는 이전에 Parse 대시보드에서 설정한 변경 사항이 포함될 것입니다.

![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/hoK1HstTFa37T52U5--Id_image.png)

비밀번호 재설정 양식은 다음과 같이 보일 것입니다:

![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/NTHyzD0FyekyYfQFe4Cgr_image.png)

그게 전부입니다. 이 양식에서 비밀번호를 변경한 후, 사용자는 다시 귀하의 애플리케이션에 로그인할 수 있습니다.

## 3 - 비밀번호 요청 컴포넌트 만들기

앞서 언급했듯이, 비밀번호 재설정을 가능하게 하기 위해 사용자 계정 이메일을 위한 텍스트 입력 필드와 함께 2단계에서 보여준 기능을 포함하는 컴포넌트를 만들어야 합니다. 다음은 이 컴포넌트의 완전한 예입니다. 원하신다면 이전 가이드의 사용자 로그인 프로젝트에 연결할 수 있습니다.

:::CodeblockTabs
UserResetPassword.js

```javascript
1	import React, { useState } from 'react';
2	import Parse from 'parse/dist/parse.min.js';
3	import './App.css';
4	import { Button, Divider, Input } from 'antd';
5	
6	export const UserPasswordReset = () => {
7	  // State variables
8	  const [email, setEmail] = useState('');
9	
10	  // Functions used by the screen components
11	  const doRequestPasswordReset = async function () {
12	    // Note that this value come from state variables linked to your text input
13	    const emailValue = email;
14	    try {
15	      await Parse.User.requestPasswordReset(emailValue);
16	      alert(`Success! Please check ${email} to proceed with password reset.`);
17	      return true;
18	    } catch (error) {
19	      // Error can be caused by lack of Internet connection
20	      alert(`Error! ${error}`);
21	      return false;
22	    }
23	  };
24	
25	  return (
26	    <div>
27	      <div className="header">
28	        <img
29	          className="header_logo"
30	          alt="Back4App Logo"
31	          src={
32	            'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png'
33	          }
34	        />
35	        <p className="header_text_bold">{'React on Back4App'}</p>
36	        <p className="header_text">{'User Password Reset'}</p>
37	      </div>
38	      <div className="container">
39	        <h2 className="heading">{'Request password reset email'}</h2>
40	        <Divider />
41	        <div className="form_wrapper">
42	          <Input
43	            value={email}
44	            onChange={(event) => setEmail(event.target.value)}
45	            placeholder="Your account email"
46	            size="large"
47	            className="form_input"
48	          />
49	        </div>
50	        <div className="form_buttons">
51	          <Button
52	            onClick={() => doRequestPasswordReset()}
53	            type="primary"
54	            className="form_button"
55	            color={'#208AEC'}
56	            size="large"
57	          >
58	            Request password reset
59	          </Button>
60	        </div>
61	      </div>
62	    </div>
63	  );
64	};
```

UserResetPassword.tsx

```typescript
1	import React, { useState, FC, ReactElement } from 'react';
2	import './App.css';
3	import { Button, Divider, Input } from 'antd';
4	const Parse = require('parse/dist/parse.min.js');
5	
6	export const UserPasswordReset: FC<{}> = (): ReactElement => {
7	  // State variables
8	  const [email, setEmail] = useState('');
9	
10	  // Functions used by the screen components
11	  const doRequestPasswordReset = async function (): Promise<boolean> {
12	    // Note that this value come from state variables linked to your text input
13	    const emailValue: string = email;
14	    try {
15	      await Parse.User.requestPasswordReset(emailValue);
16	      alert(`Success! Please check ${email} to proceed with password reset.`);
17	      return true;
18	    } catch(error: any) {
19	      // Error can be caused by lack of Internet connection
20	      alert(`Error! ${error}`);
21	      return false;
22	    }
23	  };
24	
25	  return (
26	    <div>
27	      <div className="header">
28	        <img
29	          className="header_logo"
30	          alt="Back4App Logo"
31	          src={
32	            'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png'
33	          }
34	        />
35	        <p className="header_text_bold">{'React on Back4App'}</p>
36	        <p className="header_text">{'User Password Reset'}</p>
37	      </div>
38	      <div className="container">
39	        <h2 className="heading">{'Request password reset email'}</h2>
40	        <Divider />
41	        <div className="form_wrapper">
42	          <Input
43	            value={email}
44	            onChange={(event) => setEmail(event.target.value)}
45	            placeholder="Your account email"
46	            size="large"
47	            className="form_input"
48	          />
49	        </div>
50	        <div className="form_buttons">
51	          <Button
52	            onClick={() => doRequestPasswordReset()}
53	            type="primary"
54	            className="form_button"
55	            color={'#208AEC'}
56	            size="large"
57	          >
58	            Request password reset
59	          </Button>
60	        </div>
61	      </div>
62	    </div>
63	  );
64	};
```
:::

이 클래스를 <font color="#2166ae">`App.css`</font> 파일에 추가하여 구성 요소 레이아웃 요소를 완전히 렌더링하세요:

:::CodeblockTabs
App.css

```css
1	@import '~antd/dist/antd.css';
2	
3	.App {
4	  text-align: center;
5	}
6	
7	html {
8	  box-sizing: border-box;
9	  outline: none;
10	  overflow: auto;
11	}
12	
13	*,
14	*:before,
15	*:after {
16	  margin: 0;
17	  padding: 0;
18	  box-sizing: inherit;
19	}
20	
21	h1,
22	h2,
23	h3,
24	h4,
25	h5,
26	h6 {
27	  margin: 0;
28	  font-weight: bold;
29	}
30	
31	p {
32	  margin: 0;
33	}
34	
35	body {
36	  margin: 0;
37	  background-color: #fff;
38	}
39	
40	.container {
41	  width: 100%;
42	  max-width: 500px;
43	  margin: auto;
44	  padding: 20px 0;
45	  text-align: left;
46	}
47	
48	.header {
49	  align-items: center;
50	  padding: 25px 0;
51	  background-color: #208AEC;
52	}
53	
54	.header_logo {
55	  height: 55px;
56	  margin-bottom: 20px;
57	  object-fit: contain;
58	}
59	
60	.header_text_bold {
61	  margin-bottom: 3px;
62	  color: rgba(255, 255, 255, 0.9);
63	  font-size: 16px;
64	  font-weight: bold;
65	}
66	
67	.header_text {
68	  color: rgba(255, 255, 255, 0.9);
69	  font-size: 15px;
70	}
71	
72	.heading {
73	  font-size: 22px;
74	}
75	
76	.form_wrapper {
77	  margin-top: 20px;
78	  margin-bottom: 10px;
79	}
80	
81	.form_input {
82	  margin-bottom: 20px;
83	}
84	
85	.form_button {
86	  width: 100%;
87	}
```
:::

이 구성 요소는 다음과 같은 화면에 렌더링되어야 합니다:

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/qaZn9ihmyr8A6-rPs2adm_image.png" size="80" width="592" height="522" position="center" showCaption="false"}

## 결론

이 가이드의 끝에서, 당신은 Parse 사용자가 React에서 비밀번호를 재설정할 수 있도록 하는 방법을 배웠습니다. 다음 가이드에서는 유용한 사용자 쿼리를 수행하는 방법을 보여드리겠습니다.