---
title: React Native에서 Parse로 실시간 쿼리 구현하기
slug: docs-kr/react-native/parse-sdk/real-time/react-hook-real-time
description: Parse SDK를 활용해 React Native 애플리케이션에 실시간 쿼리를 구현하고, 효율적인 데이터 동기화를 설정하는 방법을 학습하세요.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-19T13:52:08.857Z
---

# Parse를 사용한 실시간 업데이트를 위한 React 훅 시작하기

## 소개

Parse React Native Lib에 오신 것을 환영합니다! 이 가이드에서는 Parse React Lib이 무엇인지, React Native 프로젝트에 설치하고 사용하는 방법을 배울 수 있습니다.

## 동기

Parse/Back4App을 Javascript 기반 프로젝트에 통합하는 가장 쉬운 방법은 [Parse Javascript SDK](https://www.npmjs.com/package/parse). 이 라이브러리는 NodeJS, ReactJS, VueJS, AngularJS, React-Native와 같은 여러 Javascript 환경에서 작동하며 Back4App 기능에 접근할 수 있게 해줍니다.

Parse React Native의 목표는 최소한의 구성, 코드 재사용성 및 Android와 iOS에 대한 네이티브 최적화를 제공하는 가볍고 사용하기 쉬운 레이어를 제공하여 React Native 개발자에게 이 경험을 더욱 향상시키는 것입니다.

이 패키지를 사용하면 자격 증명 설정, HTTP 요청, 실시간 동기화, 오프라인 우선 상호작용과 같은 항목이 React Native 앱에 자동으로 제공됩니다. 이 라이브러리는 [Parse Javascript SDK](https://www.npmjs.com/package/parse), 위에 완전히 Typescript로 작성되었으며 현재 Alpha 버전입니다.

이 초기 가이드에서는 @parse/react-native 라이브러리를 React Native 프로젝트에 설치하고 설정할 것입니다.

:::hint{type="danger"}
Parse React Native는 현재 Alpha 버전입니다. 이 라이브러리는 테스트 중이므로 주의해서 진행하는 것이 좋습니다. 여러분의 피드백은 매우 감사하니, 라이브러리를 사용하고 질문이나 첫 인상을 community\@back4app.com으로 이메일로 보내주시면 됩니다.
:::

## 전제 조건

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

- Back4App에서 [앱 생성](https://www.back4app.com/docs/get-started/new-parse-app):
-  [라이브 쿼리 활성화](https://www.back4app.com/docs/platform/parse-live-query) 튜토리얼을 따르세요.
- [Npm ](https://www.npmjs.com/get-npm?utm_source=house\&utm_medium=homepage\&utm_campaign=free%20orgs\&utm_term=Install%20npm) 또는 yarn이 설치되어 있어야 합니다:
- [Npx ](https://www.npmjs.com/package/npx) 패키지 실행기가 설치되어 있어야 합니다.
:::

## 1 - 설치

React Native 애플리케이션이 없다면, 다음 명령어를 사용하여 <font color="#2166ae">`npx`</font> 패키지 실행기를 사용하여 새 프로젝트를 생성하세요:

:::BlockQuote
npx react-native init startWithParseRN
:::

다음으로 <font color="#2166ae">`@parse/react-native`</font> 및 그 동등한 의존성 <font color="#2166ae">`parse`</font>를 React Native 애플리케이션에 설치하세요:

:::BlockQuote
\# yarn 사용
여기서 yarn 추가 @parse/react-native parse

\# npm 사용
npm install --save @parse/react-native parse
:::

## 2 - 애플리케이션 설정

앱이 Back4App 서버에 안전하게 연결할 수 있도록 하려면, Parse JavaScript SDK에 앱의 자격 증명을 제공해야 합니다.

```javascript
1	//In your App.js
2	import { initializeParse } from  '@parse/react-native';
3	
4	initializeParse(
5	  'https://YOUR-SUBDOMAIN.b4a.io/',
6	  'APPLICATION_ID',
7	  'JAVASCRIPT_KEY'
8	);
```

당신의<font color="#2166ae">`앱 ID`</font>와 <font color="#2166ae">`자바스크립트 키`</font> 자격 증명은 당신의 앱 <font color="#2166ae">`대시보드`</font>를 열고 [Back4App 웹사이트](https://www.back4app.com/)를 클릭하여 찾을 수 있습니다 <font color="#2166ae">`앱 설정`</font> > <font color="#2166ae">`코어 설정`</font>, <font color="#2166ae">`서버 설정`</font> 아래에서.

당신의 서브도메인은 <font color="#2166ae">`앱 설정`</font> > <font color="#2166ae">`코어 설정`</font> > <font color="#2166ae">`서버 URL 및 실시간 쿼리`</font>. 더 많은 정보는 이 가이드를 확인하세요 [여기](https://www.back4app.com/docs/platform/parse-live-query).

## 3 - 첫 번째 쿼리 만들기

다음으로, 당신은 첫 번째 쿼리를 만들고 이를 앱에 표시할 것입니다. <font color="#2166ae">`@parse/react-native`</font> 라이브러리는 <font color="#2166ae">`useParseQuery`</font> 훅을 내보내므로 오프라인 지원, 실시간 변경 사항 등의 기능을 구현하는 방법을 찾는 데 시간을 낭비하지 않습니다.

이것은 <font color="#2166ae">`Parse.Query`</font>를 사용하고 쿼리에서 반환된 데이터에 접근하는 데 사용할 수 있는 몇 가지 속성을 가진 객체를 반환합니다:

```javascript
1	// In your App.js
2	
3	import React from 'react';
4	import { ActivityIndicator, FlatList, View,Text } from 'react-native';
5	import { initializeParse, useParseQuery } from  '@parse/react-native';
6	
7	// remember to call initializeParse with your credentials before using useParseQuery
8	initializeParse(
9	  'https://YOUR-SUBDOMAIN.b4a.io/',
10	  'APPLICATION_ID',
11	  'JAVASCRIPT_KEY'
12	);
13	
14	export default function App() {
15	 const parseQuery = new Parse.Query('Todo');
16	 const {
17	  isLive,
18	  isLoading,
19	  isSyncing,
20	  results,
21	  count,
22	  error,
23	  reload
24	 } = useParseQuery(parseQuery);
25	
26	if (isLoading) {
27	  return <ActivityIndicator/>;
28	}
29	
30	return (
31	<FlatList
32	   data={results}
33	   renderItem={({item}) => (
34	   <View
35	     style={ {
36	      height:  70,
37	      flex:  1,
38	      alignItems:  'center',
39	      justifyContent:  'center',
40	    } }>
41	      <Text>Task: {item.get('title')}</Text>
42	   </View>
43	)}
44	/>);
45	}
```

훅에 쿼리를 전달할 때, 먼저 저장했을 수 있는 캐시된 결과를 찾습니다. 그런 다음, 자동으로 동기화되는 Back4app LiveQuery 서버와 통신하기 위해 WebSocket 연결을 생성합니다. 다시 말해, 오프라인 우선 접근 방식과 실시간 변경 사항이 기본적으로 활성화되어 있습니다.

쿼리 상태를 확인하려면 훅에서 반환된 <font color="#2166ae">`props`</font>를 사용하세요:

- <font color="#2166ae">`IsLive`</font>: 만약<font color="#2166ae">`true`</font>, 쿼리가 실시간 업데이트를 구독하고 있음을 나타냅니다.
- <font color="#2166ae">`isLoading`</font>: 만약<font color="#2166ae">`true`</font>, 쿼리가 결과를 가져오고 있습니다.
- <font color="#2166ae">`isSyncing`</font>: 만약<font color="#2166ae">`true`</font>, 쿼리가 Back4app 서버에서 업데이트된 결과를 가져오고 있습니다.
- <font color="#2166ae">`results`</font>: 이것은 쿼리에서 반환된 데이터입니다.
- <font color="#2166ae">`count`</font>: 쿼리와 일치하는 객체의 수를 나타냅니다.
- <font color="#2166ae">`error`</font>: 쿼리에 문제가 발생하면 오류를 반환합니다.
- <font color="#2166ae">`reload`</font>: 쿼리 결과를 다시 로드합니다.

이 <font color="#2166ae">`useParseQuery`</font>는 모든 <font color="#2166ae">`Parse.Query`</font>를 수용하며, [전체 문서](https://github.com/neon-bindings/examples/blob/master/thread-count/native/src/lib.rs)를 통해 Parse 쿼리에 대한 예제를 볼 수 있습니다.

## 4 - 앱 훅 테스트

이제 React Native 앱을 실행하고 결과를 볼 수 있어야 합니다.

:::BlockQuote
\# 안드로이드에서
npx react-native run-android

\# iOS에서
npx react-native run-ios
:::

앱에서 항목을 보려면 Back4app 프로젝트에 데이터를 추가해야 한다는 점을 명심하세요.

## 완료되었습니다!

이 시점에서, 당신은 프로젝트에 <font color="#2166ae">`@parse/react-native`</font>를 설치하고, Back4App과의 연결을 구성했으며, 첫 번째 쿼리를 작성했습니다. 다음 가이드에서는 이 라이브러리의 주요 기능 중 하나인 사용 방법을 볼 것입니다. 계속해서 [“실시간 변경”](https://reactnavigation.org/docs/1.x/hello-react-navigation)에 대해 더 많은 쿼리를 작성해 보겠습니다.