---
title: 리액트 네이티브에서 Parse를 통한 사용자 등록 구현 가이드
slug: docs-kr/react-native/parse-sdk/working-with-users/react-native-user-registration
description: 리액트 네이티브에서 Parse.User를 사용해 안전한 사용자 등록 구현 방법을 학습합니다.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-19T14:40:01.941Z
---

# 리액트 네이티브 사용자 등록

## 소개

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

이 가이드에서는 <font color="#2166ae">`Parse.User`</font> 클래스를 사용하여 리액트 네이티브 앱을 위한 사용자 등록 기능을 만드는 방법을 배울 것입니다.

::embed[]{url="https://www.youtube.com/embed/5cGCJGnRtVk"}

## 전제 조건

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

- 리액트 네이티브 앱이 생성되고 [Back4App에 연결됨](https://www.back4app.com/docs/react-native/parse-sdk/react-native-sdk).
:::

## 목표

리액트 네이티브 앱을 위한 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/2.18.0/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> 메서드를 호출할 것입니다. 먼저, 루트 디렉토리에 <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, { FC, ReactElement, useState } from "react";
2	import { Button, StyleSheet, TextInput } from "react-native";
3	import Parse from "parse/react-native";
4	
5	export const UserRegistration = () => {
6	  const [username, setUsername] = useState("");
7	  const [password, setPassword] = useState("");
8	
9	  return (
10	    <>
11	      <TextInput
12	        style={styles.input}
13	        value={username}
14	        placeholder={"Username"}
15	        onChangeText={(text) => setUsername(text)}
16	        autoCapitalize={"none"}
17	      />
18	      <TextInput
19	        style={styles.input}
20	        value={password}
21	        placeholder={"Password"}
22	        secureTextEntry
23	        onChangeText={(text) => setPassword(text)}
24	      />
25	      <Button title={"Sign Up"} onPress={() => {}} />
26	    </>
27	  );
28	};
29	
30	const styles = StyleSheet.create({
31	  input: {
32	    height: 40,
33	    marginBottom: 10,
34	    backgroundColor: '#fff',
35	  },
36	});
```

UserRegistration.tsx

```typescript
1	import React, { FC, ReactElement, useState } from "react";
2	import { Button, StyleSheet, TextInput } from "react-native";
3	import Parse from "parse/react-native";
4	
5	export const UserRegistration: FC<{}> = ({}): ReactElement => {
6	  const [username, setUsername] = useState("");
7	  const [password, setPassword] = useState("");
8	
9	  return (
10	    <>
11	      <TextInput
12	        style={styles.input}
13	        value={username}
14	        placeholder={"Username"}
15	        onChangeText={(text) => setUsername(text)}
16	        autoCapitalize={"none"}
17	      />
18	      <TextInput
19	        style={styles.input}
20	        value={password}
21	        placeholder={"Password"}
22	        secureTextEntry
23	        onChangeText={(text) => setPassword(text)}
24	      />
25	      <Button title={"Sign Up"} onPress={() => {}} />
26	    </>
27	  );
28	};
29	
30	const styles = StyleSheet.create({
31	  input: {
32	    height: 40,
33	    marginBottom: 10,
34	    backgroundColor: '#fff',
35	  },
36	});
```
:::

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

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

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

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

:::CodeblockTabs
UserRegistration.js

```javascript
1	import React, { FC, ReactElement, useState } from "react";
2	import { Alert, Button, StyleSheet, TextInput } from "react-native";
3	import Parse from "parse/react-native";
4	
5	export const UserRegistration = () => {
6	  const [username, setUsername] = useState("");
7	  const [password, setPassword] = useState("");
8	
9	  const doUserRegistration = async function () {
10	    // Note that these values come from state variables that we've declared before
11	    const usernameValue = username;
12	    const passwordValue = password;
13	    // Since the signUp method returns a Promise, we need to call it using await
14	    return await Parse.User.signUp(usernameValue, passwordValue)
15	      .then((createdUser) => {
16	        // Parse.User.signUp returns the already created ParseUser object if successful
17	        Alert.alert(
18	          "Success!",
19	          `User ${createdUser.get("username")} was successfully created!`
20	        );
21	        return true;
22	      })
23	      .catch((error) => {
24	        // signUp can fail if any parameter is blank or failed an uniqueness check on the server
25	        Alert.alert("Error!", error.message);
26	        return false;
27	      });
28	  };
29	
30	  return (
31	    <>
32	      <TextInput
33	        style={styles.input}
34	        value={username}
35	        placeholder={"Username"}
36	        onChangeText={(text) => setUsername(text)}
37	        autoCapitalize={"none"}
38	      />
39	      <TextInput
40	        style={styles.input}
41	        value={password}
42	        placeholder={"Password"}
43	        secureTextEntry
44	        onChangeText={(text) => setPassword(text)}
45	      />
46	      <Button title={"Sign Up"} onPress={() => doUserRegistration()} />
47	    </>
48	  );
49	};
50	
51	const styles = StyleSheet.create({
52	  input: {
53	    height: 40,
54	    marginBottom: 10,
55	    backgroundColor: "#fff",
56	  },
57	});
```

UserRegistration.tsx

```typescript
1	import React, { FC, ReactElement, useState } from "react";
2	import { Alert, Button, StyleSheet, TextInput } from "react-native";
3	import Parse from "parse/react-native";
4	
5	export const UserRegistration: FC<{}> = ({}): ReactElement => {
6	  const [username, setUsername] = useState("");
7	  const [password, setPassword] = useState("");
8	
9	  const doUserRegistration = async function (): Promise<boolean> {
10	    // Note that these values come from state variables that we've declared before
11	    const usernameValue: string = username;
12	    const passwordValue: string = password;
13	    // Since the signUp method returns a Promise, we need to call it using await
14	    return await Parse.User.signUp(usernameValue, passwordValue)
15	      .then((createdUser: Parse.User) => {
16	        // Parse.User.signUp returns the already created ParseUser object if successful
17	        Alert.alert(
18	          "Success!",
19	          `User ${createdUser.get("username")} was successfully created!`
20	        );
21	        return true;
22	      })
23	      .catch((error: object) => {
24	        // signUp can fail if any parameter is blank or failed an uniqueness check on the server
25	        Alert.alert("Error!", error.message);
26	        return false;
27	      });
28	  };
29	
30	  return (
31	    <>
32	      <TextInput
33	        style={styles.input}
34	        value={username}
35	        placeholder={"Username"}
36	        onChangeText={(text) => setUsername(text)}
37	        autoCapitalize={"none"}
38	      />
39	      <TextInput
40	        style={styles.input}
41	        value={password}
42	        placeholder={"Password"}
43	        secureTextEntry
44	        onChangeText={(text) => setPassword(text)}
45	      />
46	      <Button title={"Sign Up"} onPress={() => doUserRegistration()} />
47	    </>
48	  );
49	};
50	
51	const styles = StyleSheet.create({
52	  input: {
53	    height: 40,
54	    marginBottom: 10,
55	    backgroundColor: "#fff",
56	  },
57	});
```
:::

## 4 - 구성 요소 테스트

마지막 단계는 React Native 애플리케이션 내에서 새로운 컴포넌트를 사용하는 것입니다 <font color="#2166ae">`App.js`</font> 파일 (또는 <font color="#2166ae">`App.tsx`</font> TypeScript를 사용하는 경우):

:::CodeblockTabs
App.js

```javascript
1	import { UserRegistration } from "./UserRegistration";
2	/*
3	Your functions here
4	*/
5	return (
6	  <>
7	    <StatusBar />
8	    <SafeAreaView style={styles.container}>
9	      <>
10	        <Text style={styles.title}>React Native on Back4App</Text>
11	        <Text>User registration tutorial</Text>
12	        <UserRegistration />
13	      </>
14	    </SafeAreaView>
15	  </>
16	);
17	
18	// Remember to add some styles at the end of your file
19	const styles = StyleSheet.create({
20	  container: {
21	    flex: 1,
22	    backgroundColor: "#fff",
23	    alignItems: "center",
24	    justifyContent: "center",
25	  },
26	  title: {
27	    fontSize: 20,
28	    fontWeight: "bold",
29	  },
30	});
```

App.tsx

```typescript
1	import { UserRegistration } from "./UserRegistration";
2	/*
3	Your functions here
4	*/
5	return (
6	  <>
7	    <StatusBar />
8	    <SafeAreaView style={styles.container}>
9	      <>
10	        <Text style={styles.title}>React Native on Back4App</Text>
11	        <Text>User registration tutorial</Text>
12	        <UserRegistration />
13	      </>
14	    </SafeAreaView>
15	  </>
16	);
17	
18	// Remember to add some styles at the end of your file
19	const styles = StyleSheet.create({
20	  container: {
21	    flex: 1,
22	    backgroundColor: "#fff",
23	    alignItems: "center",
24	    justifyContent: "center",
25	  },
26	  title: {
27	    fontSize: 20,
28	    fontWeight: "bold",
29	  },
30	});
```
:::

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

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/iPbehNRY59rROxZSszBfD_image.png" size="50" width="358" height="750" position="center" showCaption="false"}

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

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/_xSJ2aMIPg4gOxCkazhNF_image.png" size="50" width="363" height="751" position="center" showCaption="false"}

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

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/EpTs9m2bvVYMFgJ0PZ9Zw_image.png" size="50" width="368" height="751" position="center" showCaption="false"}

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

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/ZIv5M1Rf7GFMUZYPfVvKA_image.png" size="50" width="370" height="750" position="center" showCaption="false"}

## 결론

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