React Native에서 Parse로 실시간 쿼리 구현하기

10 분

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 프로젝트에 설치하고 설정할 것입니다 parse react native는 현재 alpha 버전입니다 이 라이브러리는 테스트 중이므로 주의해서 진행하는 것이 좋습니다 여러분의 피드백은 매우 감사하니, 라이브러리를 사용하고 질문이나 첫 인상을 community\@back4app com으로 이메일로 보내주시면 됩니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app에서 앱 생성 라이브 쿼리 활성화 튜토리얼을 따르세요 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 애플리케이션이 없다면, 다음 명령어를 사용하여 npx npx 패키지 실행기를 사용하여 새 프로젝트를 생성하세요 다음으로 @parse/react native @parse/react native 및 그 동등한 의존성 parse 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 앱 id 와 자바스크립트 키 자바스크립트 키 자격 증명은 당신의 앱 대시보드 대시보드 를 열고 back4app 웹사이트 https //www back4app com/ 를 클릭하여 찾을 수 있습니다 앱 설정 앱 설정 > 코어 설정 코어 설정 , 서버 설정 서버 설정 아래에서 당신의 서브도메인은 앱 설정 앱 설정 > 코어 설정 코어 설정 > 서버 url 및 실시간 쿼리 서버 url 및 실시간 쿼리 더 많은 정보는 이 가이드를 확인하세요 여기 https //www back4app com/docs/platform/parse live query 3 첫 번째 쿼리 만들기 다음으로, 당신은 첫 번째 쿼리를 만들고 이를 앱에 표시할 것입니다 @parse/react native @parse/react native 라이브러리는 useparsequery useparsequery 훅을 내보내므로 오프라인 지원, 실시간 변경 사항 등의 기능을 구현하는 방법을 찾는 데 시간을 낭비하지 않습니다 이것은 parse query 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 props 를 사용하세요 islive islive 만약 true true , 쿼리가 실시간 업데이트를 구독하고 있음을 나타냅니다 isloading isloading 만약 true true , 쿼리가 결과를 가져오고 있습니다 issyncing issyncing 만약 true true , 쿼리가 back4app 서버에서 업데이트된 결과를 가져오고 있습니다 results results 이것은 쿼리에서 반환된 데이터입니다 count count 쿼리와 일치하는 객체의 수를 나타냅니다 error error 쿼리에 문제가 발생하면 오류를 반환합니다 reload reload 쿼리 결과를 다시 로드합니다 이 useparsequery useparsequery 는 모든 parse query parse query 를 수용하며, 전체 문서 https //github com/neon bindings/examples/blob/master/thread count/native/src/lib rs 를 통해 parse 쿼리에 대한 예제를 볼 수 있습니다 4 앱 훅 테스트 이제 react native 앱을 실행하고 결과를 볼 수 있어야 합니다 앱에서 항목을 보려면 back4app 프로젝트에 데이터를 추가해야 한다는 점을 명심하세요 완료되었습니다! 이 시점에서, 당신은 프로젝트에 @parse/react native @parse/react native 를 설치하고, back4app과의 연결을 구성했으며, 첫 번째 쿼리를 작성했습니다 다음 가이드에서는 이 라이브러리의 주요 기능 중 하나인 사용 방법을 볼 것입니다 계속해서 “실시간 변경” https //reactnavigation org/docs/1 x/hello react navigation 에 대해 더 많은 쿼리를 작성해 보겠습니다