--- title: React에서 Parse를 사용한 사용자 로그인 및 로그아웃 구현 slug: docs-kr/react/working-with-users/react-login description: React 앱에서 Parse.User 클래스 활용해 로그인 및 로그아웃 구현 방법. image: https://www.back4app.com/images/logo-social.png createdAt: 2024-03-19T17:20:13.079Z --- # 리액트를 위한 사용자 로그인 및 로그아웃 ## 소개 지난 가이드에서 Parse에서 사용자 등록을 처리하는 컴포넌트를 구현한 후, 이제 동일한 `Parse.User` 클래스를 사용하여 사용자 로그인 및 로그아웃하는 방법을 배우게 됩니다. `Parse.User.logIn` 메서드는 유효한 사용자 세션을 로컬 스토리지에 저장하므로, `current` 와 같은 메서드에 대한 향후 호출이 사용자 데이터를 성공적으로 검색할 수 있습니다. 반면에, `logOut` 는 이 세션을 디스크에서 지우고 Parse 서버의 모든 연결된 서비스에서 로그아웃합니다. ## 전제 조건 :::hint{type="info"} 이 튜토리얼을 완료하려면 다음이 필요합니다: - 리액트 앱이 생성되고 [Back4App에 연결됨](https://www.back4app.com/docs/react/quickstart). - 이전 가이드를 완료하여 [Parse.User 클래스](https://www.back4app.com/docs/react/working-with-users/sign-up-page-react)에 대한 이해를 높이세요. - 이 가이드에서 제공하는 화면 레이아웃을 테스트/사용하려면 [`Ant Design` 라이브러리를 설정해야 합니다.](https://ant.design/docs/react/introduce) ::: ## 목표 리액트 앱을 위한 사용자 로그인 및 로그아웃 기능을 구축하는 것입니다. ## 1 - logIn 및 logOut 메서드 이해하기 Parse 사용자 관리는 `Parse.User` 객체 유형을 사용하며, 이는 기본 `ParseObject` 유형을 확장하면서 `current` 및 `getUsername`, 같은 고유한 도우미 메서드를 포함하여 앱 전반에 걸쳐 사용자 데이터를 검색하는 데 도움을 줍니다. `Parse.User` 객체에 대해 더 읽으려면 [여기 공식 문서에서](https://parseplatform.org/Parse-SDK-JS/api/master/Parse.User.html). 이 가이드에서는 `logIn` 및 `logOut` 메서드를 사용하는 방법을 배우게 되며, 이는 사용자 로그인 프로세스를 처리하고 사용자 데이터를 로컬에 저장합니다. ## 2 - 로그인 컴포넌트 만들기 이제 앱에서 `UserLogIn` 컴포넌트를 만들어 보겠습니다. `src` 디렉토리에 `UserLogIn.js` 파일을 생성하세요 (`UserLogIn.tsx` TypeScript를 사용하는 경우) 그리고 상태 훅을 사용하여 입력 요소를 추가하여 데이터를 관리합니다. 현재 로그인한 사용자로 상태 변수를 업데이트하는 함수도 있으며, 나중에 사용할 것입니다: :::CodeblockTabs UserLogIn.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 UserLogin = () => { 7 // State variables 8 const [username, setUsername] = useState(''); 9 const [password, setPassword] = useState(''); 10 const [currentUser, setCurrentUser] = useState(null); 11 12 // Function that will return current user and also update current username 13 const getCurrentUser = async function () { 14 const currentUser = await Parse.User.current(); 15 // Update state variable holding current user 16 setCurrentUser(currentUser); 17 return currentUser; 18 }; 19 20 return ( 21
22
23 Back4App Logo 30

{'React on Back4App'}

31

{'User Login'}

32
33
34

{'User Login'}

35 36
37 setUsername(event.target.value)} 40 placeholder="Username" 41 size="large" 42 className="form_input" 43 /> 44 setPassword(event.target.value)} 47 placeholder="Password" 48 size="large" 49 type="password" 50 className="form_input" 51 /> 52
53
54 64
65 66
67
68 69
70
71 72
73
74 75
76
77

Don't have an account? Sign up

78
79
80 ); 81 }; ``` UserLogIn.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 UserLogin: FC<{}> = (): ReactElement => { 7 // State variables 8 const [username, setUsername] = useState(''); 9 const [password, setPassword] = useState(''); 10 const [currentUser, setCurrentUser] = useState(null); 11 12 // Function that will return current user and also update current username 13 const getCurrentUser = async function (): Promise { 14 const currentUser: (Parse.User | null) = await Parse.User.current(); 15 // Update state variable holding current user 16 setCurrentUser(currentUser); 17 return currentUser; 18 } 19 20 return ( 21
22
23 Back4App Logo 30

{'React on Back4App'}

31

{'User Login'}

32
33
34

{'User Login'}

35 36
37 setUsername(event.target.value)} 40 placeholder="Username" 41 size="large" 42 className="form_input" 43 /> 44 setPassword(event.target.value)} 47 placeholder="Password" 48 size="large" 49 type="password" 50 className="form_input" 51 /> 52
53
54 64
65 66
67
68 69
70
71 72
73
74 75
76
77

Don't have an account? Sign up

78
79
80 ); 81 }; ``` ::: 이제 상태 변수를 사용하여 `Parse.User.logIn` 메서드를 호출하는 함수를 구현할 수 있습니다: :::CodeblockTabs JavaScript ```javascript 1 const doUserLogIn = async function () { 2 // Note that these values come from state variables that we've declared before 3 const usernameValue = username; 4 const passwordValue = password; 5 try { 6 const loggedInUser = await Parse.User.logIn(usernameValue, passwordValue); 7 // logIn returns the corresponding ParseUser object 8 alert( 9 `Success! User ${loggedInUser.get( 10 'username' 11 )} has successfully signed in!` 12 ); 13 // To verify that this is in fact the current user, `current` can be used 14 const currentUser = await Parse.User.current(); 15 console.log(loggedInUser === currentUser); 16 // Clear input fields 17 setUsername(''); 18 setPassword(''); 19 // Update state variable holding current user 20 getCurrentUser(); 21 return true; 22 } catch (error) { 23 // Error can be caused by wrong parameters or lack of Internet connection 24 alert(`Error! ${error.message}`); 25 return false; 26 } 27 }; ``` ```typescript 1 const doUserLogIn = async function (): Promise { 2 // Note that these values come from state variables that we've declared before 3 const usernameValue: string = username; 4 const passwordValue: string = password; 5 try { 6 const loggedInUser: Parse.User = await Parse.User.logIn(usernameValue, passwordValue); 7 // logIn returns the corresponding ParseUser object 8 alert( 9 `Success! User ${loggedInUser.get('username')} has successfully signed in!`, 10 ); 11 // To verify that this is in fact the current user, `current` can be used 12 const currentUser: Parse.User = await Parse.User.current(); 13 console.log(loggedInUser === currentUser); 14 // Clear input fields 15 setUsername(''); 16 setPassword(''); 17 // Update state variable holding current user 18 getCurrentUser(); 19 return true; 20 } catch (error: any) { 21 // Error can be caused by wrong parameters or lack of Internet connection 22 alert(`Error! ${error.message}`); 23 return false; 24 } 25 }; ``` ::: 이 함수를 `UserLogIn` 컴포넌트 안에 삽입하고, `return` 호출 바로 전에 호출하고 테스트하세요. 폼의 로그인 버튼 `onClick` 액션을 `() => doUserLogIn()`. 이 화면 레이아웃을 완전히 렌더링하려면, 다음 클래스를 `App.css` 파일에 추가하세요: :::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: 900px; 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 .flex { 77 display: flex; 78 } 79 80 .flex_between { 81 display: flex; 82 justify-content: space-between; 83 } 84 85 .flex_child { 86 flex: 0 0 45%; 87 } 88 89 .heading_button { 90 margin-left: 12px; 91 } 92 93 .list_item { 94 padding-bottom: 15px; 95 margin-bottom: 15px; 96 border-bottom: 1px solid rgba(0, 0, 0, 0.06); 97 text-align: left; 98 } 99 100 .list_item_title { 101 color: rgba(0, 0, 0, 0.87); 102 font-size: 17px; 103 } 104 105 .list_item_description { 106 color: rgba(0, 0, 0, 0.5); 107 font-size: 15px; 108 } 109 110 .form_input { 111 margin-bottom: 20px; 112 } 113 114 .login-social { 115 display: flex; 116 justify-content: center; 117 margin-bottom: 30px; 118 } 119 120 .login-social-item { 121 width: 54px; 122 height: 54px; 123 border-radius: 54px; 124 padding: 12px; 125 margin: 0 12px; 126 border: 1px solid #e6e6e6; 127 box-shadow: 0 2px 4px #d6d6d6; 128 } 129 130 .login-social-item--facebook { 131 padding: 4px; 132 background-color: #3C5B9B; 133 } 134 135 .login-social-item__image { 136 width: 100%; 137 } 138 139 .form__hint { 140 color: rgba(0, 0, 0, 0.5); 141 font-size: 16px; 142 text-align: center; 143 } ``` ::: 애플리케이션을 실행하고 이 로그인 컴포넌트를 메인 애플리케이션 파일에 가져오세요. 이렇게 생긴 화면과 올바른 자격 증명으로 로그인한 후 성공 메시지를 볼 수 있어야 합니다: ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/SsOX_fEH0uUbp0_3VRB-l_image.png) ## 3 - 로그인한 사용자 확인 사용자가 애플리케이션에 성공적으로 로그인한 후, 그 사실을 알 수 있어야 하며 애플리케이션에서 로그아웃할 수 있어야 합니다. 먼저 로그인 양식을 숨기고 사용자 이름이 포함된 환영 메시지를 렌더링합시다. 현재 사용자 이름을 보유하고 있는 상태 변수와 함께 조건부 연산자의 사용에 주목하세요. :::CodeblockTabs UserLogIn.js ```javascript 1 // Your imports ... 2 export const UserLogin = () => { 3 // State variables and functions ... 4 5 return ( 6
7
8 Back4App Logo 15

{'React on Back4App'}

16

{'User Login'}

17
18 {currentUser === null && ( 19
20

{'User Login'}

21 22
23 setUsername(event.target.value)} 26 placeholder="Username" 27 size="large" 28 className="form_input" 29 /> 30 setPassword(event.target.value)} 33 placeholder="Password" 34 size="large" 35 type="password" 36 className="form_input" 37 /> 38
39
40 50
51 52
53
54 55
56
57 58
59
60 61
62
63

Don't have an account? Sign up

64
65 )} 66 {currentUser !== null && 67 (
68

{'User Screen'}

69 70

{`Hello ${currentUser.get('username')}!`}

71
72 81
82
) 83 } 84
85 ); 86 }; ``` UserLogIn.tsx ```typescript 1 // Your imports ... 2 export const UserLogin: FC<{}> = (): ReactElement => { 3 // State variables and functions ... 4 5 return ( 6
7
8 Back4App Logo 15

{'React on Back4App'}

16

{'User Login'}

17
18 {currentUser === null && ( 19
20

{'User Login'}

21 22
23 setUsername(event.target.value)} 26 placeholder="Username" 27 size="large" 28 className="form_input" 29 /> 30 setPassword(event.target.value)} 33 placeholder="Password" 34 size="large" 35 type="password" 36 className="form_input" 37 /> 38
39
40 50
51 52
53
54 55
56
57 58
59
60 61
62
63

Don't have an account? Sign up

64
65 )} 66 {currentUser !== null && 67 (
68

{'User Screen'}

69 70

{`Hello ${currentUser.get('username')}!`}

71
72 81
82
) 83 } 84
85 ); 86 }; ``` ::: 앱을 다시 실행해 보세요. 이제 앱이 사용자 화면과 환영 메시지를 다음과 같이 표시할 것입니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/iphqrWbJfIa34MW3ei4aL_image.png" size="70" width="702" height="503" position="center" showCaption="false"} ## 4 - 로그아웃 기능 만들기 로그아웃 `logOut` 메서드는 로그인보다 간단합니다. 왜냐하면 `Parse.User.logOut` 메서드는 인수를 받지 않고 `currentUser` 로컬에 저장된 데이터를 자동으로 지우기 때문입니다. 이 함수를 `UserLogin` 컴포넌트에 생성하고 로그아웃 버튼의 `onClick` 속성에서 호출하세요: :::CodeblockTabs UserLogOut.js ```javascript 1 const doUserLogOut = async function () { 2 try { 3 await Parse.User.logOut(); 4 // To verify that current user is now empty, currentAsync can be used 5 const currentUser = await Parse.User.current(); 6 if (currentUser === null) { 7 alert('Success! No user is logged in anymore!'); 8 } 9 // Update state variable holding current user 10 getCurrentUser(); 11 return true; 12 } catch (error) { 13 alert(`Error! ${error.message}`); 14 return false; 15 } 16 }; ``` UserLogOut.tsx ```typescript 1 const doUserLogOut = async function (): Promise { 2 try { 3 await Parse.User.logOut(); 4 // To verify that current user is now empty, currentAsync can be used 5 const currentUser: Parse.User = await Parse.User.current(); 6 if (currentUser === null) { 7 alert('Success! No user is logged in anymore!'); 8 } 9 // Update state variable holding current user 10 getCurrentUser(); 11 return true; 12 } catch (error: any) { 13 alert(`Error! ${error.message}`); 14 return false; 15 } 16 }; ``` ::: 성공적으로 로그아웃하면 다음과 같은 메시지가 표시됩니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/JmAG22pgR2Pr-TQj0SuB__image.png" size="80" width="732" height="494" position="center" showCaption="false"} 여기 이전에 보여준 모든 기능이 포함된 전체 구성 요소 코드가 있습니다: :::CodeblockTabs UserLogIn.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 UserLogin = () => { 7 // State variables 8 const [username, setUsername] = useState(''); 9 const [password, setPassword] = useState(''); 10 const [currentUser, setCurrentUser] = useState(null); 11 12 const doUserLogIn = async function () { 13 // Note that these values come from state variables that we've declared before 14 const usernameValue = username; 15 const passwordValue = password; 16 try { 17 const loggedInUser = await Parse.User.logIn(usernameValue, passwordValue); 18 // logIn returns the corresponding ParseUser object 19 alert( 20 `Success! User ${loggedInUser.get( 21 'username' 22 )} has successfully signed in!` 23 ); 24 // To verify that this is in fact the current user, `current` can be used 25 const currentUser = await Parse.User.current(); 26 console.log(loggedInUser === currentUser); 27 // Clear input fields 28 setUsername(''); 29 setPassword(''); 30 // Update state variable holding current user 31 getCurrentUser(); 32 return true; 33 } catch (error) { 34 // Error can be caused by wrong parameters or lack of Internet connection 35 alert(`Error! ${error.message}`); 36 return false; 37 } 38 }; 39 40 const doUserLogOut = async function () { 41 try { 42 await Parse.User.logOut(); 43 // To verify that current user is now empty, currentAsync can be used 44 const currentUser = await Parse.User.current(); 45 if (currentUser === null) { 46 alert('Success! No user is logged in anymore!'); 47 } 48 // Update state variable holding current user 49 getCurrentUser(); 50 return true; 51 } catch (error) { 52 alert(`Error! ${error.message}`); 53 return false; 54 } 55 }; 56 57 // Function that will return current user and also update current username 58 const getCurrentUser = async function () { 59 const currentUser = await Parse.User.current(); 60 // Update state variable holding current user 61 setCurrentUser(currentUser); 62 return currentUser; 63 }; 64 65 return ( 66
67
68 Back4App Logo 75

{'React on Back4App'}

76

{'User Login'}

77
78 {currentUser === null && ( 79
80

{'User Login'}

81 82
83 setUsername(event.target.value)} 86 placeholder="Username" 87 size="large" 88 className="form_input" 89 /> 90 setPassword(event.target.value)} 93 placeholder="Password" 94 size="large" 95 type="password" 96 className="form_input" 97 /> 98
99
100 110
111 112
113
114 115
116
117 118
119
120 121
122
123

Don't have an account? Sign up

124
125 )} 126 {currentUser !== null && ( 127
128

{'User Screen'}

129 130

{`Hello ${currentUser.get('username')}!`}

131
132 141
142
143 )} 144
145 ); 146 }; ``` UserLogIn.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 UserLogin: FC<{}> = (): ReactElement => { 7 // State variables 8 const [username, setUsername] = useState(''); 9 const [password, setPassword] = useState(''); 10 const [currentUser, setCurrentUser] = useState(null); 11 12 const doUserLogIn = async function (): Promise { 13 // Note that these values come from state variables that we've declared before 14 const usernameValue: string = username; 15 const passwordValue: string = password; 16 try { 17 const loggedInUser: Parse.User = await Parse.User.logIn(usernameValue, passwordValue); 18 // logIn returns the corresponding ParseUser object 19 alert( 20 `Success! User ${loggedInUser.get('username')} has successfully signed in!`, 21 ); 22 // To verify that this is in fact the current user, `current` can be used 23 const currentUser: Parse.User = await Parse.User.current(); 24 console.log(loggedInUser === currentUser); 25 // Clear input fields 26 setUsername(''); 27 setPassword(''); 28 // Update state variable holding current user 29 getCurrentUser(); 30 return true; 31 } catch (error: any) { 32 // Error can be caused by wrong parameters or lack of Internet connection 33 alert(`Error! ${error.message}`); 34 return false; 35 } 36 }; 37 38 const doUserLogOut = async function (): Promise { 39 try { 40 await Parse.User.logOut(); 41 // To verify that current user is now empty, currentAsync can be used 42 const currentUser: Parse.User = await Parse.User.current(); 43 if (currentUser === null) { 44 alert('Success! No user is logged in anymore!'); 45 } 46 // Update state variable holding current user 47 getCurrentUser(); 48 return true; 49 } catch (error: any) { 50 alert(`Error! ${error.message}`); 51 return false; 52 } 53 }; 54 55 // Function that will return current user and also update current username 56 const getCurrentUser = async function (): Promise { 57 const currentUser: (Parse.User | null) = await Parse.User.current(); 58 // Update state variable holding current user 59 setCurrentUser(currentUser); 60 return currentUser; 61 } 62 63 return ( 64
65
66 Back4App Logo 73

{'React on Back4App'}

74

{'User Login'}

75
76 {currentUser === null && ( 77
78

{'User Login'}

79 80
81 setUsername(event.target.value)} 84 placeholder="Username" 85 size="large" 86 className="form_input" 87 /> 88 setPassword(event.target.value)} 91 placeholder="Password" 92 size="large" 93 type="password" 94 className="form_input" 95 /> 96
97
98 108
109 110
111
112 113
114
115 116
117
118 119
120
121

Don't have an account? Sign up

122
123 )} 124 {currentUser !== null && 125 (
126

{'User Screen'}

127 128

{`Hello ${currentUser.get('username')}!`}

129
130 139
140
) 141 } 142
143 ); 144 }; ``` ::: ## 결론 이 가이드를 마치면서, React에서 Parse 사용자를 로그인하고 로그아웃하는 방법을 배웠습니다. 다음 가이드에서는 유용한 사용자 쿼리를 수행하는 방법을 보여드리겠습니다.