--- title: useParseQuery로 실시간 React Native 앱 빌드하기 slug: docs-kr/react-native/parse-sdk/real-time/react-native-real-time description: useParseQuery 훅을 사용해 Parse 쿼리로 실시간 React Native 앱을 개발하세요. image: https://www.back4app.com/images/logo-social.png createdAt: 2024-03-19T13:52:20.440Z --- # useParseQuery 훅을 사용하여 실시간 React Native 앱 구축하기 ## 소개 이 가이드에서는 ToDO React Native 앱 예제를 사용하여 `@parse/react-native` 라이브러리의 주요 기능을 탐색합니다. `useParseQuery` 훅을 사용하여 실시간으로 작업을 쿼리하고 이 앱에 결과를 로컬로 저장합니다. 다양한 Parse 쿼리를 사용하여 프로젝트에서 새로운 Parse 라이브러리를 사용하는 방법을 발견할 것입니다. :::hint{type="danger"} Parse React Native는 현재 알파 버전입니다. 라이브러리는 테스트 중이므로 주의해서 진행하는 것이 좋습니다. 귀하의 피드백은 매우 감사하므로, 라이브러리를 자유롭게 사용하고 질문 및 첫 인상을 community\@back4app.com으로 이메일로 보내주십시오. ::: ## 목표 ToDo 앱을 생성하여 Parse React Native 라이브러리의 주요 사용 사례를 탐색합니다. ## 전제 조건 :::hint{type="info"} **이 튜토리얼을 완료하려면 다음이 필요합니다:** - Back4App에서 생성된 앱. - [라이브 쿼리 활성화](https://www.back4app.com/docs/platform/parse-live-query) 튜토리얼을 따르십시오. - **참고: ** [Parse React Native 튜토리얼](https://www.back4app.com/docs/react-native/parse-sdk/real-time/react-hook-real-time)을 따라 @parse/react-native로 시작하는 방법을 배우십시오. ::: ## 1 - 초기 프로젝트 설정 시작하기 전에, 이 튜토리얼의 시작점으로 설정한 bootstrap React Native 프로젝트를 가져와야 합니다. 이것은 모든 종속성과 스타일이 미리 정의된 간단한 `react-native init` 프로젝트로, `@parse/react-native` 기능 탐색에 집중할 수 있습니다. [Zip 다운로드](https://github.com/templates-back4app/react-native-todo-app/archive/main.zip) 또는 프로젝트를 클론할 수 있습니다. :::BlockQuote git clone https:*//github.com/templates-back4app/react-native-todo-app.git* ::: 다음으로, 프로젝트 종속성을 설치합니다: :::BlockQuote cd react-native-todo-app \# yarn 사용 yarn install \# npm 사용 npm install ::: iOS의 경우, pods를 설치합니다: :::BlockQuote cd ios **&&** npx pod**-**install ::: 이전 가이드에서, [시작하기](https://www.back4app.com/docs/react-native/parse-react-native-sdk/getting-started), `initializeParse`를 사용하여 Back4app 서버와의 연결을 활성화하는 방법을 배웠습니다. `App Id` 및 `JavaScriptKey`를 `src/index.js`: ```javascript 1 // src/index.js 2 initializeParse( 3 'https://parseapi.back4app.com/', 4 'APPLICATION_ID', 5 'JAVASCRIPT_KEY' 6 ); ``` 프로젝트를 실행하세요: :::BlockQuote \# iOS용 npx react-native run-ios \# Android용 npx react-native run-android ::: 그 후, 스타터 프로젝트가 성공적으로 설정되며 앱은 다음과 같이 보일 것입니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/ARgyL376qWC8HXTY40ure_image.png" size="50" width="306" height="645" position="center" showCaption="false"} 프로젝트의 디렉토리 구조: :::BlockQuote react-native-todo-app ├── src/ │ ├── config/ │ │ └── ReactotronConfig.js │ ├── images/ │ │ ├── back4app\_logo.png │ │ └── bg.jpg │ ├── components/ │ │ └── CardTodoButton/ │ │ └── index.js // 카드 버튼 항목 구성 요소 │ │ └── Menu/ │ │ └── index.js // 카드 버튼이 있는 메뉴 │ │ └── TaskList/ │ │ └── index.js // 작업 목록 구성 요소 │ ├── pages/ │ │ └── AddTodo/ │ │ └── index.js // 할 일 추가 페이지 │ │ └── Learning/ │ │ └── index.js // 학습 페이지 │ │ └── Main/ │ │ └── index.js // 메인 페이지 │ │ └── Shopping/ │ │ └── index.js // 쇼핑 페이지 │ │ └── Work/ │ │ └── index.js // 작업 페이지 │ ├── services/ │ │ └── api.js │ ├── index.js // 앱 진입점 │ └── routes.js // 내비게이션 경로 구성 ├── .editorconfig ├── .eslintrc.json ├── .gitignore ├── babel.config.js ├── dependencies.json ├── devDependencies.json ├── index.js ├── jsconfig.js ├── LICENSE ├── package.json └── README.md ::: 초기 프로젝트에는 주요 4개의 페이지가 있습니다: - **학습 페이지**: 학습 카테고리에 속하는 작업을 보여줍니다. - **쇼핑 페이지**: 쇼핑 카테고리에 속하는 작업을 보여줍니다. - **작업 페이지**: 작업 카테고리에 속하는 작업을 보여줍니다. - **할 일 추가 페이지**: 새 작업을 생성하기 위한 기본 양식입니다. ## 2 - 새 작업 만들기 ToDo 앱의 일반적인 기능은 사용자가 새 작업을 생성할 수 있도록 하는 것입니다. 이를 위해 create task 기능은 Parse Javascript SDK를 사용하여 새 Parse Object를 생성하고 Back4app에 저장합니다. `AddTodo` 페이지에서 시작 프로젝트의 기본 양식이 있으며, 작업 설명을 입력할 수 있는 입력란, 작업 카테고리를 선택할 수 있는 체크박스 및 제출 버튼이 있습니다. 이 튜토리얼에서는 `Parse.Object`를 작업에 대해 생성하며, 다음과 같은 속성을 가집니다: :::hint{type="info"} Parse Javascript SDK [데이터 저장](https://www.back4app.com/docs/react-native/parse-sdk/react-native-save-data) 가이드를 참조하여 Parse 객체 생성에 대한 자세한 정보를 확인하세요. ::: ```javascript 1 { 2 description: 'simple string of task descrition', 3 author: 'person creating the task', 4 completed: false, // or true 5 createdAt: Date, // automatically created by back4app 6 } ``` 이제 사용자가 제출 버튼을 클릭할 때 작업을 생성하는 메서드를 구현합니다. `pages/AddTodo/index.js` 구성 요소에서 `handleSubmit` 메서드를 구현해 보겠습니다: ```javascript 1 async function handleSubmit() { 2 try { 3 const Task = new Parse.Object.extend('Task'); 4 // Create a new instance of that class. 5 const task = new Task(); 6 task.set('description', description); 7 task.set('category', category); 8 task.set('author', 'Anonymous'); 9 task.set('completed', false); 10 await task.save(); 11 12 Alert.alert('New Task Created.'); 13 } catch (error) { 14 console.log('Error while creating task: ', error); 15 } 16 } ``` 그 후, 이제 몇 가지 작업을 생성할 수 있습니다. 원하는 만큼 작업을 자유롭게 생성하세요. 다음 단계에서는 이 작업들을 쿼리할 것입니다. ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/0QEgLvOn78QvuJGwDzcBF_image.png" size="50" width="301" height="647" position="center" showCaption="false"} ## 3 - 작업 쿼리 및 필터링 작업을 몇 개 생성했으니, 이제 Parse React Native Lib를 사용할 시간입니다. 몇 가지 쿼리를 작성하고 `useParseQuery` 훅에 전달할 것입니다. 쿼리는 학습 카테고리에서 완료되지 않은 모든 작업을 나열합니다. 이것은 훅의 첫 번째 사용 사례로, `enableLiveQuery:false`로 설정하여 한 번만 가져오는 쿼리를 구축할 것입니다. 이 쿼리는 학습 페이지 컴포넌트가 렌더링될 때 실행됩니다. `enableLiveQuery`는 기본적으로 `true`이며, `false`로 변경하면 실시간 변경 구독이 비활성화됩니다. `pages/Learning/index.js` 컴포넌트에서, 우리의 `Parse.query`:를 작성해 봅시다. ```javascript 1 const Task = new Parse.Object.extend('Task'); 2 const query = new Parse.Query(Task); 3 query.equalTo('completed', false); 4 query.equalTo('category', 'learning'); ``` 쿼리를 `useParseQuery` 훅의 인수로 전달합니다: :::BlockQuote const {results} = useParseQuery(query, \{enableLiveQuery: false}); ::: 위 코드는 Parse 훅의 기본 사용법을 보여줍니다. useParseQuery 훅은 모든 Parse.Query와 함께 사용할 수 있는 새로운 리소스입니다. [모든 Parse.Query 기능](https://docs.parseplatform.org/js/guide/#queries)을 사용하여 데이터 객체를 검색하고 이 훅은 이 경험을 더욱 향상시킬 것입니다. 결과를 얻은 후, 이를 TaskList 컴포넌트에 전달하여 앱에서 작업을 표시합니다: ```javascript 1 //Learning/index.js 2 import React, {useEffect} from 'react'; 3 import {ActivityIndicator} from 'react-native'; 4 import TaskList from '../../components/TaskList'; 5 import Parse from 'parse/react-native.js'; 6 import {useParseQuery} from '@parse/react-native'; 7 8 const Learning = () => { 9 const Task = new Parse.Object.extend('Task'); 10 const query = new Parse.Query(Task); 11 query.equalTo('completed', false); 12 query.equalTo('category', 'learning'); 13 14 const {results, isLoading} = useParseQuery(query, {enableLiveQuery: false}); 15 16 if (isLoading) { 17 return ; 18 } 19 20 return ; 21 }; 22 23 export default Learning; ``` 귀하의 앱은 다음과 같이 작업 목록을 성공적으로 표시해야 합니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/ElXKoPQfM6X0CAuZR10JY_image.png" size="50" width="308" height="647" position="center" showCaption="false"} ## 4 - 실시간 변경 사항 당신이 탐색할 두 번째 사용법은 실시간 업데이트입니다. `useParseQuery` 훅은 Parse Live Query를 캡슐화하고 실시간 변경 사항에 대한 즉각적인 지원을 제공합니다. 훅에 쿼리를 전달하면 Back4app LiveQuery 서버와 통신하기 위해 WebSocket 연결이 생성되며, 이는 자동으로 동기화됩니다. 이 기능을 쇼핑 카테고리의 작업에 추가할 것입니다. Live Query와 Back4App 서브도메인이 Back4app 대시보드 앱에서 활성화되어야 한다는 점에 유의하는 것이 중요합니다. 이를 수행하면 서브도메인 URL을 `initializeParse`에 추가하면 Parse React Native 훅의 결과는 항상 업데이트된 데이터를 갖게 됩니다. 서브도메인을 구성하지 않으면, `useParseQuery` 훅은 실시간으로 데이터를 검색할 수 없습니다. ```javascript 1 // src/index.js 2 initializeParse( 3 '.b4a.io', 4 'APPLICATION_ID', 5 'JAVASCRIPT_KEY' 6 ); ``` 다음으로, `pages/Shopping/index.js` 컴포넌트에서 우리의 `Parse.query`: ```javascript 1 const Task = new Parse.Object.extend('Task'); 2 const query = new Parse.Query(Task); 3 query.equalTo('completed', false); 4 query.equalTo('category', 'shopping'); ``` 그런 다음 쿼리를 `useParseQuery` 훅의 인수로 전달합니다: :::BlockQuote const \{results, isLoading, isSyncing} = useParseQuery(query); ::: 실시간 변경 사항이 기본적으로 활성화되어 있으므로 추가 매개변수가 필요하지 않음을 유의하십시오. 결과를 얻은 후, 이를 다음으로 전달하여`TaskList` 구성 요소에 작업을 표시합니다: ```javascript 1 import React from 'react'; 2 import {ActivityIndicator} from 'react-native'; 3 import TaskList from '../../components/TaskList'; 4 import Parse from 'parse/react-native.js'; 5 import {useParseQuery} from '@parse/react-native'; 6 7 const Shopping = () => { 8 const Task = new Parse.Object.extend('Task'); 9 const query = new Parse.Query(Task); 10 query.equalTo('completed', false); 11 query.equalTo('category', 'shopping'); 12 13 const {results, isLoading, isSyncing} = useParseQuery(query); 14 15 if (isLoading || isSyncing) { 16 return ; 17 } 18 return ; 19 }; 20 21 export default Shopping; ``` ## 5 - 오프라인 지원 세 번째 사용 사례는 `@parse/react-native`를 사용하여 쿼리 결과의 오프라인 캐싱을 사용하는 것입니다. 이는 사용자가 네트워크 지연이나 인터넷 연결 문제를 겪을 때 React Native 앱이 작동해야 할 경우 유용합니다. 오프라인 지원은 React Native 앱의 반응성과 사용자 경험을 향상시킵니다. 좋은 소식은 추가 단계가 필요하지 않다는 것입니다! 오프라인 우선 접근 방식과 실시간 구독이 기본적으로 활성화되어 있습니다. 간단히 말해, `useParseQuery` 훅을 사용하면 사용자가 다시 온라인으로 돌아갈 때 오프라인 지원을 위해 쿼리 결과를 캐싱하고 라이브 쿼리 구독과 결합된다는 것을 보장합니다. ## 6 - 쿼리 제한 및 정렬 작업 카테고리의 작업 목록이 한 사람이 처리하기에는 너무 많고, 하루에 대한 하위 집합만 표시하고 싶다고 가정해 보겠습니다. 또한 생성 날짜로 정렬합니다. 다음의 `pages/Shopping/index.js` 구성 요소에서, 우리의 `Parse.query`:를 작성해 보겠습니다. ```javascript 1 const Task = new Parse.Object.extend('Task'); 2 const query = new Parse.Query(Task); 3 query.equalTo('completed', false); 4 query.equalTo('category', 'work'); 5 query.ascending('createdAt'); // order by creation date 6 query.limit(5); // limit to 5 tasks ``` 그런 다음 쿼리를 `useParseQuery` 훅에 인수로 전달하고 이를 `TaskList` 컴포넌트에 전달하여 앱에서 작업을 표시합니다: ```javascript 1 import React from 'react'; 2 import {ActivityIndicator} from 'react-native'; 3 import Parse from 'parse/react-native.js'; 4 import {useParseQuery} from '@parse/react-native'; 5 import TaskList from '../../components/TaskList'; 6 // import { Container } from './styles'; 7 8 const Work = () => { 9 const Task = new Parse.Object.extend('Task'); 10 const query = new Parse.Query(Task); 11 query.equalTo('completed', false); 12 query.equalTo('category', 'work'); 13 query.ascending('createdAt'); 14 query.limit(5); 15 16 const {results, isLoading} = useParseQuery(query, { 17 enableLiveQuery: false, 18 }); 19 20 if (isLoading) { 21 return ; 22 } 23 return ; 24 }; 25 26 export default Work; ``` ## 7 - useParseQuery 인수 지정하기 이전 단계에서 Live Query와 같은 기능을 사용하여 Back4app에서 데이터를 검색하기 위해 `@parse/react-native`를 사용했습니다. 따라서 내보낸 인터페이스에 대한 설명이 필요합니다. `useParseQuery` 훅은 `Parse.Query`와 `UseParseQueryOptions` 객체를 인수로 받습니다. 기본 선택적 구성 객체는 다음과 같습니다: ```javascript 1 { 2 enableLiveQuery: true, 3 enableLocalDatastore: true, 4 initialLoad: [] 5 } ``` - **enableLiveQuery**: 실시간 라이브 쿼리 기능이 기본적으로 활성화되어 있습니다. - **enableLocalDatastore**: 데이터 결과의 로컬 캐싱을 활성화하며, 기본값은 `true`이지만 `false`로 설정하여 끌 수 있습니다. - **initialLoad**: 이미 메모리에 데이터가 로드되어 있다면, 사용자에게 데이터 미리보기를 보여주도록 설정할 수 있습니다. ## 완료되었습니다! 이 시점에서, 당신은 `@parse/react-native` 라이브러리를 사용하여 Back4App에서 React Native todo 앱을 만드는 방법을 배웠습니다.