--- title: 리액트 네이티브: Parse 사용자 비밀번호 재설정 구현 방법 slug: docs-kr/react-native/parse-sdk/working-with-users/react-native-password-reset description: React Native용 Parse를 사용하여 사용자 비밀번호 재설정 기능을 구현하는 방법을 알아보세요. 이메일 인증과 함께 안전한 비밀번호 재설정을 제공합니다. image: https://www.back4app.com/images/logo-social.png createdAt: 2024-03-19T15:50:13.670Z --- # 리액트 네이티브 사용자 비밀번호 재설정 ## 소개 시스템에 비밀번호를 도입하면 사용자가 비밀번호를 잊어버리는 것은 사실입니다. 이러한 경우, Parse 라이브러리는 사용자가 안전하게 비밀번호를 재설정할 수 있는 방법을 제공합니다. 이메일 인증과 마찬가지로, Parse는 이미 이를 위한 구현을 준비해 두었습니다, `Parse.User.requestPasswordEmail`. 이 방법을 사용하면 Parse가 비밀번호 재설정의 모든 측면을 원활하게 처리합니다. ::embed[]{url="https://www.youtube.com/embed/dmlPFO1zo80"} ## 전제 조건 :::hint{type="info"} **이 튜토리얼을 완료하려면 다음이 필요합니다:** - 리액트 네이티브 앱이 생성되고 [Back4App에 연결됨](https://www.back4app.com/docs/react-native/parse-sdk/react-native-sdk). - 이전 가이드를 완료하여 [Parse 사용자 클래스에 대한 이해를 높이세요](https://www.back4app.com/docs/react-native/parse-sdk/working-with-users/react-native-login). ::: ## 목표 React Native 앱에 Parse를 사용하여 사용자 비밀번호 재설정 기능을 추가합니다. ## 1 - 비밀번호 재설정 이메일 사용자 정의 “`Parse.User.requestPasswordEmail`” 메서드를 호출하기 전에 비밀번호 재설정을 요청한 후 사용자가 받을 메시지를 사용자 정의할 수 있습니다. 앱 대시보드에 로그인하고 설정->검증 이메일로 이동하여 비밀번호 재설정 이메일 제목이나 메시지를 변경하세요. 사용자가 명확한 지침이 포함된 이메일을 받고, 그것이 실제로 귀하의 애플리케이션에서 온 것임을 나타내는지 확인하세요. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/vWUUq02YQjyLFsQRtm5aN_image.png) ## 2 - requestPasswordEmail 사용하기 “`Parse.User.requestPasswordEmail`” 메서드를 호출하는 데는 사용자 계정 이메일만 매개변수로 필요하므로 비밀번호 재설정 화면에 다음 함수를 추가하세요. 사용자 이메일을 위한 텍스트 입력을 화면에 추가하는 것을 잊지 마세요. :::CodeblockTabs JavaScript ```javascript 1 const doUserPasswordReset = async function () { 2 // Note that this value come from state variables linked to your text input 3 const emailValue = email; 4 return await Parse.User.requestPasswordReset(emailValue) 5 .then(() => { 6 // logIn returns the corresponding ParseUser object 7 Alert.alert( 8 'Success!', 9 `Please check ${email} to proceed with password reset.`, 10 ); 11 return true; 12 }) 13 .catch((error) => { 14 // Error can be caused by lack of Internet connection 15 Alert.alert('Error!', error.message); 16 return false; 17 }); 18 }; ``` ```typescript 1 const doUserPasswordReset = async function (): Promise { 2 // Note that this value come from state variables linked to your text input 3 const emailValue: string = email; 4 return await Parse.User.requestPasswordReset(emailValue) 5 .then(() => { 6 // logIn returns the corresponding ParseUser object 7 Alert.alert( 8 'Success!', 9 `Please check ${email} to proceed with password reset.`, 10 ); 11 return true; 12 }) 13 .catch((error: object) => { 14 // Error can be caused by lack of Internet connection 15 Alert.alert('Error!', error.message); 16 return false; 17 }); 18 }; ``` ::: 계속 진행하여 화면과 구성 요소를 테스트하세요. 비밀번호 재설정 이메일 요청 후에는 다음과 같은 메시지가 표시됩니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/XfbIUhm89_x4I7CJI23-H_image.png" size="50" width="355" height="740" position="center" showCaption="false"} 이메일을 받았어야 하므로, 계속 진행하여 받은 편지함을 확인하세요. 메시지에는 이전에 Parse 대시보드에서 설정한 변경 사항이 포함될 것입니다. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/28ePpcP3tau-T1R_1Lj77_image.png) 비밀번호 재설정 양식은 다음과 같이 보일 것입니다: ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/7xjVKTUDVHZkKmgZxTUVL_image.png) 그게 전부입니다. 이 양식에서 비밀번호를 변경한 후, 사용자는 다시 애플리케이션에 로그인할 수 있습니다. ## 3 - 비밀번호 요청 컴포넌트 만들기 앞서 언급했듯이, 비밀번호 재설정을 가능하게 하기 위해 사용자 계정 이메일을 위한 텍스트 입력 필드와 함께 2단계에서 보여준 기능을 포함하는 컴포넌트를 만들어야 합니다. 다음은 이 컴포넌트의 완전한 예입니다. 원하신다면 이전 가이드의 사용자 로그인 프로젝트에 연결할 수 있습니다. :::CodeblockTabs UserResetPassword.js ```javascript 1 import React, {FC, ReactElement, useState} from 'react'; 2 import {Alert, Text, TextInput, TouchableOpacity, View} from 'react-native'; 3 import Parse from 'parse/react-native'; 4 import {useNavigation} from '@react-navigation/native'; 5 import Styles from './Styles'; 6 7 export const UserResetPassword = () => { 8 const navigation = useNavigation(); 9 10 // Your state variable 11 const [email, setEmail] = useState(''); 12 13 const doUserPasswordReset = async function (): Promise { 14 // Note that this value come from state variables linked to your text input 15 const emailValue = email; 16 return await Parse.User.requestPasswordReset(emailValue) 17 .then(() => { 18 // logIn returns the corresponding ParseUser object 19 Alert.alert( 20 'Success!', 21 `Please check ${email} to proceed with password reset.`, 22 ); 23 // Redirect user to your login screen 24 navigation.navigate('Login'); 25 return true; 26 }) 27 .catch((error) => { 28 // Error can be caused by lack of Internet connection 29 Alert.alert('Error!', error.message); 30 return false; 31 }); 32 }; 33 34 return ( 35 36 37 {'Please enter your account email to reset your password:'} 38 setEmail(text)} 43 autoCapitalize={'none'} 44 keyboardType={'email-address'} 45 /> 46 doUserPasswordReset()}> 47 48 {'Request password reset'} 49 50 51 52 53 ); 54 }; ``` UserResetPassword.tsx ```typescript 1 import React, {FC, ReactElement, useState} from 'react'; 2 import {Alert, Text, TextInput, TouchableOpacity, View} from 'react-native'; 3 import Parse from 'parse/react-native'; 4 import {useNavigation} from '@react-navigation/native'; 5 import Styles from './Styles'; 6 7 export const UserResetPassword: FC<{}> = ({}): ReactElement => { 8 const navigation = useNavigation(); 9 10 // Your state variable 11 const [email, setEmail] = useState(''); 12 13 const doUserPasswordReset = async function (): Promise { 14 // Note that this value come from state variables linked to your text input 15 const emailValue: string = email; 16 return await Parse.User.requestPasswordReset(emailValue) 17 .then(() => { 18 // logIn returns the corresponding ParseUser object 19 Alert.alert( 20 'Success!', 21 `Please check ${email} to proceed with password reset.`, 22 ); 23 // Redirect user to your login screen 24 navigation.navigate('Login'); 25 return true; 26 }) 27 .catch((error: object) => { 28 // Error can be caused by lack of Internet connection 29 Alert.alert('Error!', error.message); 30 return false; 31 }); 32 }; 33 34 return ( 35 36 37 {'Please enter your account email to reset your password:'} 38 setEmail(text)} 43 autoCapitalize={'none'} 44 keyboardType={'email-address'} 45 /> 46 doUserPasswordReset()}> 47 48 {'Request password reset'} 49 50 51 52 53 ); 54 }; ``` ::: 이 구성 요소는 다음과 같은 화면에 렌더링되어야 합니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/NzfeuOTZiQ8jQ_0jivdJ6_image.png" size="50" width="347" height="741" position="center" showCaption="false"} ### 결론 이 가이드의 끝에서, React Native에서 Parse 사용자가 비밀번호를 재설정할 수 있도록 하는 방법을 배웠습니다. 다음 가이드에서는 유용한 사용자 쿼리를 수행하는 방법을 보여드리겠습니다.