React Native에서 Parse로 실시간 쿼리 구현하기
Parse를 사용한 실시간 업데이트를 위한 React 훅 시작하기
소개
Parse React Native Lib에 오신 것을 환영합니다! 이 가이드에서는 Parse React Lib이 무엇인지, React Native 프로젝트에 설치하고 사용하는 방법을 배울 수 있습니다.
동기
Parse/Back4App을 Javascript 기반 프로젝트에 통합하는 가장 쉬운 방법은 Parse Javascript SDK. 이 라이브러리는 NodeJS, ReactJS, VueJS, AngularJS, React-Native와 같은 여러 Javascript 환경에서 작동하며 Back4App 기능에 접근할 수 있게 해줍니다.
Parse React Native의 목표는 최소한의 구성, 코드 재사용성 및 Android와 iOS에 대한 네이티브 최적화를 제공하는 가볍고 사용하기 쉬운 레이어를 제공하여 React Native 개발자에게 이 경험을 더욱 향상시키는 것입니다.
이 패키지를 사용하면 자격 증명 설정, HTTP 요청, 실시간 동기화, 오프라인 우선 상호작용과 같은 항목이 React Native 앱에 자동으로 제공됩니다. 이 라이브러리는 Parse Javascript SDK, 위에 완전히 Typescript로 작성되었으며 현재 Alpha 버전입니다.
이 초기 가이드에서는 @parse/react-native 라이브러리를 React Native 프로젝트에 설치하고 설정할 것입니다.
Parse React Native는 현재 Alpha 버전입니다. 이 라이브러리는 테스트 중이므로 주의해서 진행하는 것이 좋습니다. 여러분의 피드백은 매우 감사하니, 라이브러리를 사용하고 질문이나 첫 인상을 [email protected]으로 이메일로 보내주시면 됩니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
1 - 설치
React Native 애플리케이션이 없다면, 다음 명령어를 사용하여 npx 패키지 실행기를 사용하여 새 프로젝트를 생성하세요:
다음으로 @parse/react-native 및 그 동등한 의존성 parse를 React Native 애플리케이션에 설치하세요:
2 - 애플리케이션 설정
앱이 Back4App 서버에 안전하게 연결할 수 있도록 하려면, Parse JavaScript SDK에 앱의 자격 증명을 제공해야 합니다.
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 );당신의앱 ID와 자바스크립트 키 자격 증명은 당신의 앱 대시보드를 열고 Back4App 웹사이트를 클릭하여 찾을 수 있습니다 앱 설정 > 코어 설정, 서버 설정 아래에서.
당신의 서브도메인은 앱 설정 > 코어 설정 > 서버 URL 및 실시간 쿼리. 더 많은 정보는 이 가이드를 확인하세요 여기.
3 - 첫 번째 쿼리 만들기
다음으로, 당신은 첫 번째 쿼리를 만들고 이를 앱에 표시할 것입니다. @parse/react-native 라이브러리는 useParseQuery 훅을 내보내므로 오프라인 지원, 실시간 변경 사항 등의 기능을 구현하는 방법을 찾는 데 시간을 낭비하지 않습니다.
이것은 Parse.Query를 사용하고 쿼리에서 반환된 데이터에 접근하는 데 사용할 수 있는 몇 가지 속성을 가진 객체를 반환합니다:
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 연결을 생성합니다. 다시 말해, 오프라인 우선 접근 방식과 실시간 변경 사항이 기본적으로 활성화되어 있습니다.
쿼리 상태를 확인하려면 훅에서 반환된 props를 사용하세요:
- IsLive: 만약true, 쿼리가 실시간 업데이트를 구독하고 있음을 나타냅니다.
- isLoading: 만약true, 쿼리가 결과를 가져오고 있습니다.
- isSyncing: 만약true, 쿼리가 Back4app 서버에서 업데이트된 결과를 가져오고 있습니다.
- results: 이것은 쿼리에서 반환된 데이터입니다.
- count: 쿼리와 일치하는 객체의 수를 나타냅니다.
- error: 쿼리에 문제가 발생하면 오류를 반환합니다.
- reload: 쿼리 결과를 다시 로드합니다.
이 useParseQuery는 모든 Parse.Query를 수용하며, 전체 문서를 통해 Parse 쿼리에 대한 예제를 볼 수 있습니다.
4 - 앱 훅 테스트
이제 React Native 앱을 실행하고 결과를 볼 수 있어야 합니다.
앱에서 항목을 보려면 Back4app 프로젝트에 데이터를 추가해야 한다는 점을 명심하세요.
완료되었습니다!
이 시점에서, 당신은 프로젝트에 @parse/react-native를 설치하고, Back4App과의 연결을 구성했으며, 첫 번째 쿼리를 작성했습니다. 다음 가이드에서는 이 라이브러리의 주요 기능 중 하나인 사용 방법을 볼 것입니다. 계속해서 “실시간 변경”에 대해 더 많은 쿼리를 작성해 보겠습니다.