---
title: Data types
slug: docs-kr/react-native/parse-sdk/data-objects/react-native-data-types
description: 리액트 네이티브에서 Parse SDK로 다양한 JSON 호환 데이터 유형을 효과적으로 관리하고 저장하는 방법을 알아보세요.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-18T21:19:00.900Z
---

# 리액트 네이티브 컴포넌트에서 데이터 유형 파싱

## 소개

Parse Core 기능의 핵심은 데이터 객체 관리입니다. Parse는 SDK 또는 API(REST 또는 GraphQL)를 사용하여 데이터를 간단하게 저장하고 쿼리할 수 있도록 합니다. 모든 데이터 객체 기능은 <font color="#2166ae">`Parse.Object`</font> 클래스를 사용하여 구축되며, 이 클래스의 필드는 여러 JSON 호환 데이터 유형의 키-값 쌍을 포함할 수 있습니다. 객체 필드에 할당할 수 있는 주요 데이터 유형은 다음과 같습니다:

- <font color="#2166ae">`숫자`</font>: 정수(42) 또는 부동 소수점(42.5) 숫자, ‘.’가 소수 구분 기호인 경우;
- <font color="#2166ae">`부울`</font>: true 또는 false 값;
- <font color="#2166ae">`문자열`</font>: 최대 2147483647자까지의 문자열. 이렇게 큰 값은 데이터 작업을 느리게 할 수 있습니다;
- <font color="#2166ae">`날짜 및 시간`</font>:<font color="#2166ae">`날짜 및 시간`</font> 객체는 기본적으로 UTC 형식으로 저장됩니다. 다른 시간대를 사용해야 하는 경우 수동으로 변환해야 합니다;
- <font color="#2166ae">`배열`</font>: Parse와 호환되는 데이터가 포함된 배열.
- <font color="#2166ae">`객체`</font>: JSON 객체로, Parse 데이터도 포함됩니다. SDK에서 사용할 수 있을 때, <font color="#2166ae">`include()`</font> 호출은 객체 속성의 세부 정보를 가져옵니다.

:::hint{type="success"}
Array 유형을 사용하기로 선택할 때, 배열 객체를 작게 유지하는 것이 좋습니다. 이는 데이터 작업의 전반적인 성능에 영향을 미칠 수 있습니다. 20개 요소를 초과하지 않고 시간이 지남에 따라 증가하지 않는 경우 Array 유형을 사용하는 것이 좋습니다. Array 유형 대신 Pointer 및 Relation 유형을 대안으로 사용할 수 있습니다.
:::

이 가이드에서는 위에 나열된 각 기본 데이터 유형에 데이터를 저장하는 방법을 배웁니다. React Native 제품 등록 구성 요소를 구축하여 데이터를 형식화, 변환 및 Parse Server에 저장하는 방법을 보여줍니다.

Parse는 또한 지리적 위치 리소스의 힘을 사용하기 위해 <font color="#2166ae">`GeoPoint`</font>와 <font color="#2166ae">`Pointer`</font> 또는 <font color="#2166ae">`Relation`</font>을 사용하여 Parse 전용 관계형 데이터를 제공합니다. 다음 가이드에서 두 가지 모두 다룰 것입니다.

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

## 전제 조건

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

- Back4App에 연결된 React Native 앱[.](https://www.back4app.com/docs/react-native/parse-sdk/react-native-sdk)
- 이 가이드에서 제공하는 화면 레이아웃을 테스트/사용하려면<font color="#2166ae">`react-native-paper`</font>를 설정해야 합니다.[라이브러리](https://github.com/callstack/react-native-paper).
:::

## 목표

Parse와 호환되는 기본 데이터 유형을 이해하고, React Native 구성 요소에서 각 데이터 유형을 Parse에 저장하는 것입니다.

## 1 - 제품 생성 구성 요소

먼저 구성 요소 구조를 생성해 보겠습니다. 간단하게 만들고 각 데이터 유형에 대해 하나의 텍스트 입력, 하나의 스위치 토글, 그리고 객체를 저장하기 위한 제출 버튼이 있는 양식 화면을 만듭니다. 이러한 입력은 다음과 같은 <font color="#2166ae">`제품`</font> 필드 값을 수집합니다: 이름(<font color="#2166ae">`문자열`</font>), 수량(<font color="#2166ae">`숫자`</font>), 가격(<font color="#2166ae">`숫자`</font>), 사용 가능(<font color="#2166ae">`부울`</font>), 만료 날짜(<font color="#2166ae">`날짜 및 시간`</font>), 및 카테고리(<font color="#2166ae">`배열`</font>). 또한, 저장 방법에서 추가 <font color="#2166ae">`객체`</font> 유형 필드를 저장할 것이지만, 이 필드는 입력 필드가 필요하지 않습니다.

다음 코드를 포함하여 <font color="#2166ae">`ProductCreation.js/ProductCreation.tsx`</font>라는 파일에 별도의 컴포넌트를 생성하거나, 주요 애플리케이션 파일(<font color="#2166ae">`App.js/App.tsx`</font> 또는 <font color="#2166ae">`index.js`</font>)에 추가하세요. <font color="#2166ae">`react-native-paper`</font>를 사용하여 완전한 스타일링으로 이 레이아웃을 사용할 수 있거나, 사용자 정의 양식을 설정할 수 있습니다.

:::CodeblockTabs
ProductCreation.js

```javascript
1	import React, {useState} from 'react';
2	import {
3	  Alert,
4	  Image,
5	  SafeAreaView,
6	  StatusBar,
7	  StyleSheet,
8	  View,
9	} from 'react-native';
10	import Parse from 'parse/react-native';
11	import {
12	  Button as PaperButton,
13	  Switch as PaperSwitch,
14	  Text as PaperText,
15	  TextInput as PaperTextInput,
16	} from 'react-native-paper';
17	
18	export const ProductCreation = () => {
19	  // State variables
20	  const [productName, setProductName] = useState('');
21	  const [productQuantity, setProductQuantity] = useState('');
22	  const [productPrice, setProductPrice] = useState('');
23	  const [productAvailable, setProductAvailable] = useState(false);
24	  const [productExpirationDate, setProductExpirationDate] = useState('');
25	  const [productCategories, setProductCategories] = useState('');
26	
27	  const toggleProductAvailable = () => setProductAvailable(!productAvailable);
28	
29	  return (
30	    <>
31	      <StatusBar backgroundColor="#208AEC" />
32	      <SafeAreaView style={Styles.container}>
33	        <View style={Styles.header}>
34	          <Image
35	            style={Styles.header_logo}
36	            source={ { uri: 'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png', } }
37	          />
38	          <PaperText style={Styles.header_text_bold}>
39	            {'React Native on Back4App'}
40	          </PaperText>
41	          <PaperText style={Styles.header_text}>{'Product Creation'}</PaperText>
42	        </View>
43	        <View style={Styles.wrapper}>
44	          {/* Boolean type input  */}
45	          <View style={Styles.switch_container}>
46	            <PaperText>{'Available?'}</PaperText>
47	            <PaperSwitch
48	              value={productAvailable}
49	              onValueChange={toggleProductAvailable}
50	            />
51	          </View>
52	          {/* String type input */}
53	          <PaperTextInput
54	            value={productName}
55	            onChangeText={(text) => setProductName(text)}
56	            label="Name"
57	            mode="outlined"
58	            style={Styles.form_input}
59	          />
60	          {/* Number type input (integer) */}
61	          <PaperTextInput
62	            value={productQuantity}
63	            onChangeText={(text) => setProductQuantity(text)}
64	            label="Quantity"
65	            mode="outlined"
66	            keyboardType={'number-pad'}
67	            style={Styles.form_input}
68	          />
69	          {/* Number type input (float) */}
70	          <PaperTextInput
71	            value={productPrice}
72	            onChangeText={(text) => setProductPrice(text)}
73	            label="Price"
74	            mode="outlined"
75	            keyboardType={'numeric'}
76	            style={Styles.form_input}
77	          />
78	          {/* Date type input  */}
79	          <PaperTextInput
80	            value={productExpirationDate}
81	            onChangeText={(text) => setProductExpirationDate(text)}
82	            label="Expiration Date (mm/dd/yyyy)"
83	            mode="outlined"
84	            keyboardType={'numbers-and-punctuation'}
85	            style={Styles.form_input}
86	          />
87	          {/* Array type input  */}
88	          <PaperTextInput
89	            value={productCategories}
90	            onChangeText={(text) => setProductCategories(text)}
91	            label="Categories (separated by commas)"
92	            mode="outlined"
93	            style={Styles.form_input}
94	          />
95	          {/* Product create button */}
96	          <PaperButton
97	            onPress={() => createProduct()}
98	            mode="contained"
99	            icon="plus"
100	            style={Styles.submit_button}>
101	            {'Create Product'}
102	          </PaperButton>
103	        </View>
104	      </SafeAreaView>
105	    </>
106	  );
107	};
108	
109	// These define the screen component styles
110	const Styles = StyleSheet.create({
111	  container: {
112	    flex: 1,
113	    backgroundColor: '#FFF',
114	  },
115	  wrapper: {
116	    width: '90%',
117	    alignSelf: 'center',
118	  },
119	  header: {
120	    alignItems: 'center',
121	    paddingTop: 10,
122	    paddingBottom: 20,
123	    backgroundColor: '#208AEC',
124	  },
125	  header_logo: {
126	    width: 170,
127	    height: 40,
128	    marginBottom: 10,
129	    resizeMode: 'contain',
130	  },
131	  header_text_bold: {
132	    color: '#fff',
133	    fontSize: 14,
134	    fontWeight: 'bold',
135	  },
136	  header_text: {
137	    marginTop: 3,
138	    color: '#fff',
139	    fontSize: 14,
140	  },
141	  form_input: {
142	    height: 44,
143	    marginBottom: 16,
144	    backgroundColor: '#FFF',
145	    fontSize: 14,
146	  },
147	  switch_container: {
148	    flexDirection: 'row',
149	    alignItems: 'center',
150	    justifyContent: 'space-between',
151	    paddingVertical: 12,
152	    marginBottom: 16,
153	    borderBottomWidth: 1,
154	    borderBottomColor: 'rgba(0, 0, 0, 0.3)',
155	  },
156	  submit_button: {
157	    width: '100%',
158	    maxHeight: 50,
159	    alignSelf: 'center',
160	    backgroundColor: '#208AEC',
161	  },
162	});
```

ProductCreation.tsx

```typescript
1	import React, {FC, ReactElement, useState} from 'react';
2	import {
3	  Alert,
4	  Image,
5	  SafeAreaView,
6	  StatusBar,
7	  StyleSheet,
8	  View,
9	} from 'react-native';
10	import Parse from 'parse/react-native';
11	import {
12	  Button as PaperButton,
13	  Switch as PaperSwitch,
14	  Text as PaperText,
15	  TextInput as PaperTextInput,
16	} from 'react-native-paper';
17	
18	export const ProductCreation: FC<{}> = ({}): ReactElement => {
19	  // State variables
20	  const [productName, setProductName] = useState('');
21	  const [productQuantity, setProductQuantity] = useState('');
22	  const [productPrice, setProductPrice] = useState('');
23	  const [productAvailable, setProductAvailable] = useState(false);
24	  const [productExpirationDate, setProductExpirationDate] = useState('');
25	  const [productCategories, setProductCategories] = useState('');
26	
27	  const toggleProductAvailable = () => setProductAvailable(!productAvailable);
28	
29	  return (
30	    <>
31	      <StatusBar backgroundColor="#208AEC" />
32	      <SafeAreaView style={Styles.container}>
33	        <View style={Styles.header}>
34	          <Image
35	            style={Styles.header_logo}
36	            source={ { uri: 'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png', } }
37	          />
38	          <PaperText style={Styles.header_text_bold}>
39	            {'React Native on Back4App'}
40	          </PaperText>
41	          <PaperText style={Styles.header_text}>{'Product Creation'}</PaperText>
42	        </View>
43	        <View style={Styles.wrapper}>
44	          {/* Boolean type input  */}
45	          <View style={Styles.switch_container}>
46	            <PaperText>{'Available?'}</PaperText>
47	            <PaperSwitch
48	              value={productAvailable}
49	              onValueChange={toggleProductAvailable}
50	            />
51	          </View>
52	          {/* String type input */}
53	          <PaperTextInput
54	            value={productName}
55	            onChangeText={(text) => setProductName(text)}
56	            label="Name"
57	            mode="outlined"
58	            style={Styles.form_input}
59	          />
60	          {/* Number type input (integer) */}
61	          <PaperTextInput
62	            value={productQuantity}
63	            onChangeText={(text) => setProductQuantity(text)}
64	            label="Quantity"
65	            mode="outlined"
66	            keyboardType={'number-pad'}
67	            style={Styles.form_input}
68	          />
69	          {/* Number type input (float) */}
70	          <PaperTextInput
71	            value={productPrice}
72	            onChangeText={(text) => setProductPrice(text)}
73	            label="Price"
74	            mode="outlined"
75	            keyboardType={'numeric'}
76	            style={Styles.form_input}
77	          />
78	          {/* Date type input  */}
79	          <PaperTextInput
80	            value={productExpirationDate}
81	            onChangeText={(text) => setProductExpirationDate(text)}
82	            label="Expiration Date (mm/dd/yyyy)"
83	            mode="outlined"
84	            keyboardType={'numbers-and-punctuation'}
85	            style={Styles.form_input}
86	          />
87	          {/* Array type input  */}
88	          <PaperTextInput
89	            value={productCategories}
90	            onChangeText={(text) => setProductCategories(text)}
91	            label="Categories (separated by commas)"
92	            mode="outlined"
93	            style={Styles.form_input}
94	          />
95	          {/* Product create button */}
96	          <PaperButton
97	            onPress={() => createProduct()}
98	            mode="contained"
99	            icon="plus"
100	            style={Styles.submit_button}>
101	            {'Create Product'}
102	          </PaperButton>
103	        </View>
104	      </SafeAreaView>
105	    </>
106	  );
107	};
108	
109	// These define the screen component styles
110	const Styles = StyleSheet.create({
111	  container: {
112	    flex: 1,
113	    backgroundColor: '#FFF',
114	  },
115	  wrapper: {
116	    width: '90%',
117	    alignSelf: 'center',
118	  },
119	  header: {
120	    alignItems: 'center',
121	    paddingTop: 10,
122	    paddingBottom: 20,
123	    backgroundColor: '#208AEC',
124	  },
125	  header_logo: {
126	    width: 170,
127	    height: 40,
128	    marginBottom: 10,
129	    resizeMode: 'contain',
130	  },
131	  header_text_bold: {
132	    color: '#fff',
133	    fontSize: 14,
134	    fontWeight: 'bold',
135	  },
136	  header_text: {
137	    marginTop: 3,
138	    color: '#fff',
139	    fontSize: 14,
140	  },
141	  form_input: {
142	    height: 44,
143	    marginBottom: 16,
144	    backgroundColor: '#FFF',
145	    fontSize: 14,
146	  },
147	  switch_container: {
148	    flexDirection: 'row',
149	    alignItems: 'center',
150	    justifyContent: 'space-between',
151	    paddingVertical: 12,
152	    marginBottom: 16,
153	    borderBottomWidth: 1,
154	    borderBottomColor: 'rgba(0, 0, 0, 0.3)',
155	  },
156	  submit_button: {
157	    width: '100%',
158	    maxHeight: 50,
159	    alignSelf: 'center',
160	    backgroundColor: '#208AEC',
161	  },
162	});
```
:::

이 화면을 설정한 후, 귀하의 애플리케이션은 다음과 같아야 합니다:

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

각 <font color="#2166ae">`제품`</font> 속성에는 불리언 스위치 입력을 제외하고는 각기 텍스트 입력 필드가 있다는 점에 유의하십시오. 이는 저장하기 전에 해당 데이터 유형으로 변환해야 함을 의미합니다.

## 2 - 입력 데이터 변환

데이터를 <font color="#2166ae">`Parse.object`</font>, 저장하기 전에 <font color="#2166ae">`숫자`</font>, <font color="#2166ae">`날짜 및 시간`</font>, 그리고 <font color="#2166ae">`배열`</font> 입력을 올바르게 형식화해야 합니다. 이제 상태 변수에서 데이터를 검색하고 적절한 데이터 변환을 적용하는 저장 함수를 만들어 보겠습니다:

:::CodeblockTabs
ProductCreation.js

```javascript
1	const createProduct = async function () {
2	  try {
3	    // These values come from state variables
4	    // Convert data values to corresponding data types
5	    const productNameValue = productName;
6	    const productQuantityValue = Number(productQuantity);
7	    const productPriceValue = Number(productPrice);
8	    const productAvailableValue = productAvailable;
9	    const productExpirationDateValue = new Date(productExpirationDate);
10	    const productCategoriesValue = productCategories.split(',');
11	  } catch (error) {
12	    // Error can be caused by wrong type of values in fields
13	    Alert.alert('Error!', error.message);
14	    return false;
15	  }
16	};
```

ProductCreation.tsx

```typescript
1	const createProduct = async function (): Promise<[boolean]> {
2	  try {
3	    // These values come from state variables
4	    // Convert data values to corresponding data types
5	    const productNameValue: string = productName;
6	    const productQuantityValue: number = Number(productQuantity);
7	    const productPriceValue: number = Number(productPrice);
8	    const productAvailableValue: boolean = productAvailable;
9	    const productExpirationDateValue: Date = new Date(productExpirationDate);
10	    const productCategoriesValue: string[] = productCategories.split(',');
11	  } catch (error) {
12	    // Error can be caused by wrong type of values in fields
13	    Alert.alert('Error!', error.message);
14	    return false;
15	  }
16	};
```
:::

데이터 <font color="#2166ae">`숫자`</font> 변환은 값을 <font color="#2166ae">`숫자`</font> 자바스크립트 객체로 캐스팅하여 수행됩니다. <font color="#2166ae">`날짜시간`</font>은 <font color="#2166ae">`날짜`</font> 자바스크립트 객체 생성자를 사용하여 변환됩니다; <font color="#2166ae">`배열`</font>은 <font color="#2166ae">`문자열.분할`</font> 메서드를 사용하여 생성되며, 카테고리 필드의 각 항목이 쉼표로 구분된 배열을 생성합니다.

이제 데이터가 단일 객체 안에 포함되어 있으며, 이는 새로운 <font color="#2166ae">`Parse.object`</font> 인스턴스에 설정되어 서버에 저장될 수 있습니다. 이는 <font color="#2166ae">`Parse.Object.set()`</font> 메서드를 사용하여 수행되며, 이 메서드는 두 개의 인수를 받습니다: 필드 이름과 설정할 값입니다. 또한 <font color="#2166ae">`completeData`</font>,라는 새로운 필드를 설정하겠습니다. 이는 당신의 <font color="#2166ae">`객체`</font> 유형 필드가 되며, 동일한 데이터 객체를 할당합니다.

계속해서 다음과 함께 <font color="#2166ae">`createProduct`</font> 함수를 완성하세요:

:::CodeblockTabs
ProductCreation.js

```javascript
1	const createProduct = async function () {
2	  try {
3	    // These values come from state variables
4	    // Convert data values to corresponding data types
5	    const productNameValue = productName;
6	    const productQuantityValue = Number(productQuantity);
7	    const productPriceValue = Number(productPrice);
8	    const productAvailableValue = productAvailable;
9	    const productExpirationDateValue = new Date(productExpirationDate);
10	    const productCategoriesValue = productCategories.split(',');
11	  } catch (error) {
12	    // Error can be caused by wrong type of values in fields
13	    Alert.alert('Error!', error.message);
14	    return false;
15	  }
16	
17	  // Creates a new Product parse object instance
18	  let Product = new Parse.Object('Product');
19	  
20	  // Set data to parse object
21	  Product.set('name', productNameValue);
22	  Product.set('quantity', productQuantityValue);
23	  Product.set('price', productPriceValue);
24	  Product.set('available', productAvailableValue);
25	  Product.set('expirationDate', productExpirationDateValue);
26	  Product.set('categories', productCategoriesValue);
27	  Product.set('completeData', {
28	    name: productNameValue,
29	    quantity: productQuantityValue,
30	    price: productPriceValue,
31	    available: productAvailableValue,
32	    expirationDate: productExpirationDateValue,
33	    categories: productCategoriesValue,
34	  });
35	
36	  // After setting the values, save it on the server
37	  try {
38	    let savedProduct = await Product.save();
39	    // Success
40	    Alert.alert('Success!', JSON.stringify(savedProduct));
41	    return true;
42	  } catch (error) {
43	    // Error can be caused by lack of Internet connection
44	    Alert.alert('Error!', error.message);
45	    return false;
46	  };
47	};
```

ProductCreation.tsx

```typescript
1	const createProduct = async function (): Promise<[boolean]> {
2	  try {
3	    // These values come from state variables
4	    // Convert data values to corresponding data types
5	    const productNameValue: string = productName;
6	    const productQuantityValue: number = Number(productQuantity);
7	    const productPriceValue: number = Number(productPrice);
8	    const productAvailableValue: boolean = productAvailable;
9	    const productExpirationDateValue: Date = new Date(productExpirationDate);
10	    const productCategoriesValue: string[] = productCategories.split(',');
11	  } catch (error) {
12	    // Error can be caused by wrong type of values in fields
13	    Alert.alert('Error!', error.message);
14	    return false;
15	  }
16	
17	  // Creates a new Product parse object instance
18	  let Product: Parse.Object = new Parse.Object('Product');
19	  
20	  // Set data to parse object
21	  Product.set('name', productNameValue);
22	  Product.set('quantity', productQuantityValue);
23	  Product.set('price', productPriceValue);
24	  Product.set('available', productAvailableValue);
25	  Product.set('expirationDate', productExpirationDateValue);
26	  Product.set('categories', productCategoriesValue);
27	  Product.set('completeData', {
28	    name: productNameValue,
29	    quantity: productQuantityValue,
30	    price: productPriceValue,
31	    available: productAvailableValue,
32	    expirationDate: productExpirationDateValue,
33	    categories: productCategoriesValue,
34	  });
35	
36	  // After setting the values, save it on the server
37	  try {
38	    let savedProduct: Parse.Object = await Product.save();
39	    // Success
40	    Alert.alert('Success!', JSON.stringify(savedProduct));
41	    return true;
42	  } catch (error) {
43	    // Error can be caused by lack of Internet connection
44	    Alert.alert('Error!', error.message);
45	    return false;
46	  };
47	};
```
:::

이제 구성 요소를 테스트하고, <font color="#2166ae">`createProduct`</font> 함수를 삽입한 다음, 양식 제출 버튼 <font color="#2166ae">`onPress`</font> 속성 내에서 호출해야 합니다. 제품을 생성한 후에는 다음과 같은 데이터가 포함된 알림을 볼 수 있어야 합니다:

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

서버에 올바른 데이터 유형을 사용하여 데이터가 저장되었음을 인증하려면 Parse 대시보드를 확인할 수 있습니다. <font color="#2166ae">`제품`</font> 데이터 테이블을 클릭하고 각 열의 헤더에 데이터 유형이 적혀 있는지 확인하세요. 당신의 클래스는 다음과 같아야 합니다:

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

## 결론

이 가이드의 끝에서, React Native 구성 요소를 사용하여 Parse에서 사용할 수 있는 각 기본 데이터 유형을 저장하는 방법을 배웠습니다. 다음 가이드에서는 Parse의 관계형 데이터에 대해 배울 것입니다.