---
title: React에서 Parse로 사용자 등록하기: 회원가입 컴포넌트 구현
slug: docs-kr/react/working-with-users/sign-up-page-react
description: Parse JS SDK를 활용하여 React 앱에 회원가입 기능 구현하기. Ant Design 통합 및 사용자 관리 최적화.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-19T17:19:19.936Z
---

# Parse를 사용한 React의 회원가입 페이지

## 소개

많은 앱의 핵심에서 사용자 계정은 사용자가 자신의 정보를 안전하게 접근할 수 있도록 하는 개념을 가지고 있습니다. Parse는 사용자 계정 관리를 위해 필요한 많은 기능을 자동으로 처리하는 <font color="#2166ae">`Parse.User`</font>라는 전문화된 사용자 클래스를 제공합니다.

이 가이드에서는 <font color="#2166ae">`Parse.User`</font> 클래스를 사용하여 Parse JS SDK로 React 앱의 사용자 등록 기능을 만드는 방법을 배웁니다.

## 전제 조건

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

-
  React 앱이 생성되고 [Back4App에 연결됨](https://www.back4app.com/docs/react/quickstart).
- 이 가이드에서 제공하는 화면 레이아웃을 테스트/사용하려면 [<font color="#2166ae">`Ant Design`</font> 라이브러리를 설정해야 합니다.](https://ant.design/docs/react/introduce)
:::

## 목표

React 앱을 위한 Parse를 사용하여 사용자 등록 기능을 구축하는 것입니다.

## 1 - 회원가입 메서드 이해하기

Parse 사용자 관리는 <font color="#2166ae">`Parse.User`</font> 객체 유형을 사용하며, 이는 기본 <font color="#2166ae">`ParseObject` </font> 유형을 확장하면서 <font color="#2166ae">`current` </font> 및 <font color="#2166ae">`getUsername`</font>, 같은 고유한 도우미 메서드를 포함하여 앱 전반에 걸쳐 사용자 데이터를 검색하는 데 도움을 줍니다. <font color="#2166ae">`Parse.User`</font> 객체에 대해 더 읽으려면 [여기 공식 문서에서 확인하세요](https://parseplatform.org/Parse-SDK-JS/api/master/Parse.User.html).

이 가이드에서는 <font color="#2166ae">`signUp` </font> 메서드를 사용하여 새 유효하고 고유한 <font color="#2166ae">`Parse.User`</font> 객체를 로컬 및 서버에서 생성하는 방법을 배우게 됩니다. 이 메서드는 유효한 <font color="#2166ae">`username` </font> 및 <font color="#2166ae">`password` </font> 값을 인수로 사용합니다.

## 2 - 사용자 등록 구성 요소 만들기

이제 기능 구성 요소를 만들어 보겠습니다. 이 구성 요소는 우리 앱에서 <font color="#2166ae">`signUp` </font>메서드를 호출할 것입니다. 먼저, src 디렉토리에 <font color="#2166ae">`UserRegistration.js`</font>라는 새 파일을 생성하세요 (<font color="#2166ae">`UserRegistration.tsx`</font> TypeScript를 사용하는 경우) 그리고 필요한 입력 요소(<font color="#2166ae">`username`</font> 및 <font color="#2166ae">`password` </font>입력을 추가하세요), <font color="#2166ae">`useState` </font>를 사용하여 상태 훅을 통해 데이터를 관리하세요:

:::CodeblockTabs
UserRegistration.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 UserRegistration = () => {
7	  // State variables
8	  const [username, setUsername] = useState('');
9	  const [password, setPassword] = useState('');
10	
11	  return (
12	    <div>
13	      <div className="header">
14	        <img
15	          className="header_logo"
16	          alt="Back4App Logo"
17	          src={
18	            'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png'
19	          }
20	        />
21	        <p className="header_text_bold">{'React on Back4App'}</p>
22	        <p className="header_text">{'User Registration'}</p>
23	      </div>
24	      <div className="container">
25	        <h2 className="heading">{'User Registration'}</h2>
26	        <Divider />
27	        <div className="form_wrapper">
28	          <Input
29	            value={username}
30	            onChange={(event) => setUsername(event.target.value)}
31	            placeholder="Username"
32	            size="large"
33	            className="form_input"
34	          />
35	          <Input
36	            value={password}
37	            onChange={(event) => setPassword(event.target.value)}
38	            placeholder="Password"
39	            size="large"
40	            type="password"
41	            className="form_input"
42	          />
43	        </div>
44	        <div className="form_buttons">
45	          <Button
46	            onClick={() => doUserRegistration()}
47	            type="primary"
48	            className="form_button"
49	            color={'#208AEC'}
50	            size="large"
51	          >
52	            Sign Up
53	          </Button>
54	        </div>
55	      </div>
56	    </div>
57	  );
58	};
```

UserRegistration.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 UserRegistration: FC<{}> = (): ReactElement => {
7	  // State variables
8	  const [username, setUsername] = useState('');
9	  const [password, setPassword] = useState('');
10	
11	  return (
12	    <div>
13	      <div className="header">
14	        <img
15	          className="header_logo"
16	          alt="Back4App Logo"
17	          src={
18	            'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png'
19	          }
20	        />
21	        <p className="header_text_bold">{'React on Back4App'}</p>
22	        <p className="header_text">{'User Registration'}</p>
23	      </div>
24	      <div className='container'>
25	        <h2 className="heading">{'User Registration'}</h2>
26	        <Divider />
27	        <div className="form_wrapper">
28	          <Input
29	            value={username}
30	            onChange={(event) => setUsername(event.target.value)}
31	            placeholder="Username"
32	            size="large"
33	            className="form_input"
34	          />
35	          <Input
36	            value={password}
37	            onChange={(event) => setPassword(event.target.value)}
38	            placeholder="Password"
39	            size="large"
40	            type="password"
41	            className="form_input"
42	          />
43	        </div>
44	        <div className="form_buttons">
45	          <Button
46	            onClick={() => doUserRegistration()}
47	            type="primary"
48	            className="form_button"
49	            color={'#208AEC'}
50	            size="large"
51	          >
52	            Sign Up
53	          </Button>
54	        </div>
55	      </div>
56	    </div>
57	  );
58	};
```
:::

## 3 - 가입 기능 만들기

이제 <font color="#2166ae">`signUp` </font>메서드를 호출할 가입 기능을 만들 수 있습니다:

:::CodeblockTabs
JavaScript

```javascript
1	const doUserRegistration = 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	    // Since the signUp method returns a Promise, we need to call it using await
7	    const createdUser = await Parse.User.signUp(usernameValue, passwordValue);
8	    alert(
9	      `Success! User ${createdUser.getUsername()} was successfully created!`
10	    );
11	    return true;
12	  } catch (error) {
13	    // signUp can fail if any parameter is blank or failed an uniqueness check on the server
14	    alert(`Error! ${error}`);
15	    return false;
16	  }
17	};
```

TypeScript

```typescript
1	const doUserRegistration = async function (): Promise<boolean> {
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	    // Since the signUp method returns a Promise, we need to call it using await
7	    const createdUser: Parse.User = await Parse.User.signUp(usernameValue, passwordValue);
8	    alert(
9	      `Success! User ${createdUser.getUsername()} was successfully created!`,
10	    );
11	    return true;
12	  } catch (error: any) {
13	      // signUp can fail if any parameter is blank or failed an uniqueness check on the server
14	      alert(`Error! ${error}`);
15	      return false;
16	  };
17	};
```
:::

:::hint{type="info"}
**참고**: 새로운 사용자를 생성하는 것은 <font color="#2166ae">`signUp` </font>을 사용하여 현재 로그인된 사용자로 만들기 때문에 사용자가 앱을 계속 사용하기 위해 다시 로그인할 필요가 없습니다.
:::

이 함수를 <font color="#2166ae">`UserRegistration` </font> 컴포넌트 안에, <font color="#2166ae">`return` </font> 호출 직전에 삽입하여 호출하고 테스트할 수 있도록 하세요. 양식의 가입 버튼 <font color="#2166ae">`onClick`</font> 동작을 <font color="#2166ae">`() => doUserRegistration()`</font>. 이제 컴포넌트는 다음과 같아야 합니다:

:::CodeblockTabs
UserRegistration.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 UserRegistration = () => {
7	  // State variables
8	  const [username, setUsername] = useState('');
9	  const [password, setPassword] = useState('');
10	
11	  // Functions used by the screen components
12	  const doUserRegistration = 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	      // Since the signUp method returns a Promise, we need to call it using await
18	      const createdUser = await Parse.User.signUp(usernameValue, passwordValue);
19	      alert(
20	        `Success! User ${createdUser.getUsername()} was successfully created!`
21	      );
22	      return true;
23	    } catch (error) {
24	      // signUp can fail if any parameter is blank or failed an uniqueness check on the server
25	      alert(`Error! ${error}`);
26	      return false;
27	    }
28	  };
29	
30	  return (
31	    <div>
32	      <div className="header">
33	        <img
34	          className="header_logo"
35	          alt="Back4App Logo"
36	          src={
37	            'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png'
38	          }
39	        />
40	        <p className="header_text_bold">{'React on Back4App'}</p>
41	        <p className="header_text">{'User Registration'}</p>
42	      </div>
43	      <div className="container">
44	        <h2 className="heading">{'User Registration'}</h2>
45	        <Divider />
46	        <div className="form_wrapper">
47	          <Input
48	            value={username}
49	            onChange={(event) => setUsername(event.target.value)}
50	            placeholder="Username"
51	            size="large"
52	            className="form_input"
53	          />
54	          <Input
55	            value={password}
56	            onChange={(event) => setPassword(event.target.value)}
57	            placeholder="Password"
58	            size="large"
59	            type="password"
60	            className="form_input"
61	          />
62	        </div>
63	        <div className="form_buttons">
64	          <Button
65	            onClick={() => doUserRegistration()}
66	            type="primary"
67	            className="form_button"
68	            color={'#208AEC'}
69	            size="large"
70	          >
71	            Sign Up
72	          </Button>
73	        </div>
74	      </div>
75	    </div>
76	  );
77	};
```

UserRegistration.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 UserRegistration: FC<{}> = (): ReactElement => {
7	  // State variables
8	  const [username, setUsername] = useState('');
9	  const [password, setPassword] = useState('');
10	
11	  // Functions used by the screen components
12	  const doUserRegistration = async function (): Promise<boolean> {
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	      // Since the signUp method returns a Promise, we need to call it using await
18	      const createdUser: Parse.User = await Parse.User.signUp(usernameValue, passwordValue);
19	      alert(
20	        `Success! User ${createdUser.getUsername()} was successfully created!`,
21	      );
22	      return true;
23	    } catch (error: any) {
24	        // signUp can fail if any parameter is blank or failed an uniqueness check on the server
25	        alert(`Error! ${error}`);
26	        return false;
27	    };
28	  };
29	
30	  return (
31	    <div>
32	      <div className="header">
33	        <img
34	          className="header_logo"
35	          alt="Back4App Logo"
36	          src={
37	            'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png'
38	          }
39	        />
40	        <p className="header_text_bold">{'React on Back4App'}</p>
41	        <p className="header_text">{'User Registration'}</p>
42	      </div>
43	      <div className='container'>
44	        <h2 className="heading">{'User Registration'}</h2>
45	        <Divider />
46	        <div className="form_wrapper">
47	          <Input
48	            value={username}
49	            onChange={(event) => setUsername(event.target.value)}
50	            placeholder="Username"
51	            size="large"
52	            className="form_input"
53	          />
54	          <Input
55	            value={password}
56	            onChange={(event) => setPassword(event.target.value)}
57	            placeholder="Password"
58	            size="large"
59	            type="password"
60	            className="form_input"
61	          />
62	        </div>
63	        <div className="form_buttons">
64	          <Button
65	            onClick={() => doUserRegistration()}
66	            type="primary"
67	            className="form_button"
68	            color={'#208AEC'}
69	            size="large"
70	          >
71	            Sign Up
72	          </Button>
73	        </div>
74	      </div>
75	    </div>
76	  );
77	};
```
:::

또한 레이아웃 스타일을 완전히 렌더링하기 위해 다음 클래스를 <font color="#2166ae">`App.css`</font> 파일에 추가하세요:

:::CodeblockTabs
App.css

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

이제 귀하의 앱은 다음과 같아야 합니다:

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/TlDhFG2O8SRfGcBNwNEHq_image.png" size="70" width="598" height="547" position="center" showCaption="false"}

원하는 사용자 자격 증명을 제공한 후, <font color="#2166ae">`가입하기`</font> 버튼을 눌렀을 때 모든 것이 성공적이었다면 이 메시지를 볼 수 있습니다:

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/24LlXCA9cWuzpicXUKcqy_image.png" size="70" width="596" height="548" position="center" showCaption="false"}

이전과 동일한 사용자 이름으로 사용자를 등록하려고 하면 오류 처리를 테스트할 수 있습니다:

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/wa3yu-v-KSuCeZD4ykLas_image.png" size="70" width="598" height="547" position="center" showCaption="false"}

비밀번호 없이 가입하려고 하면 또 다른 오류가 발생합니다:

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/zbYzOi1ufcp7cRC8rqkxW_image.png" size="70" width="589" height="535" position="center" showCaption="false"}

## 결론

이 가이드의 끝에서, React에서 새로운 Parse 사용자를 등록하는 방법을 배웠습니다. 다음 가이드에서는 사용자를 로그인하고 로그아웃하는 방법을 보여드리겠습니다.