useParseQuery로 실시간 React Native 앱 빌드하기

useparsequery 훅을 사용하여 실시간 react native 앱 구축하기 소개 이 가이드에서는 todo react native 앱 예제를 사용하여 @parse/react native @parse/react native 라이브러리의 주요 기능을 탐색합니다 useparsequery useparsequery 훅을 사용하여 실시간으로 작업을 쿼리하고 이 앱에 결과를 로컬로 저장합니다 다양한 parse 쿼리를 사용하여 프로젝트에서 새로운 parse 라이브러리를 사용하는 방법을 발견할 것입니다 parse react native는 현재 알파 버전입니다 라이브러리는 테스트 중이므로 주의해서 진행하는 것이 좋습니다 귀하의 피드백은 매우 감사하므로, 라이브러리를 자유롭게 사용하고 질문 및 첫 인상을 community\@back4app com으로 이메일로 보내주십시오 목표 todo 앱을 생성하여 parse react native 라이브러리의 주요 사용 사례를 탐색합니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app에서 생성된 앱 라이브 쿼리 활성화 튜토리얼을 따르십시오 참고 parse react native 튜토리얼 을 따라 @parse/react native로 시작하는 방법을 배우십시오 1 초기 프로젝트 설정 시작하기 전에, 이 튜토리얼의 시작점으로 설정한 bootstrap react native 프로젝트를 가져와야 합니다 이것은 모든 종속성과 스타일이 미리 정의된 간단한 react native init react native init 프로젝트로, @parse/react native @parse/react native 기능 탐색에 집중할 수 있습니다 zip 다운로드 https //github com/templates back4app/react native todo app/archive/main zip 또는 프로젝트를 클론할 수 있습니다 다음으로, 프로젝트 종속성을 설치합니다 ios의 경우, pods를 설치합니다 이전 가이드에서, 시작하기 https //www back4app com/docs/react native/parse react native sdk/getting started , initializeparse initializeparse 를 사용하여 back4app 서버와의 연결을 활성화하는 방법을 배웠습니다 app id app id 및 javascriptkey javascriptkey 를 src/index js src/index js 1 // src/index js 2 initializeparse( 3 'https //parseapi back4app com/', 4 'application id', 5 'javascript key' 6 ); 프로젝트를 실행하세요 그 후, 스타터 프로젝트가 성공적으로 설정되며 앱은 다음과 같이 보일 것입니다 프로젝트의 디렉토리 구조 초기 프로젝트에는 주요 4개의 페이지가 있습니다 학습 페이지 학습 카테고리에 속하는 작업을 보여줍니다 쇼핑 페이지 쇼핑 카테고리에 속하는 작업을 보여줍니다 작업 페이지 작업 카테고리에 속하는 작업을 보여줍니다 할 일 추가 페이지 새 작업을 생성하기 위한 기본 양식입니다 2 새 작업 만들기 todo 앱의 일반적인 기능은 사용자가 새 작업을 생성할 수 있도록 하는 것입니다 이를 위해 create task 기능은 parse javascript sdk를 사용하여 새 parse object를 생성하고 back4app에 저장합니다 addtodo addtodo 페이지에서 시작 프로젝트의 기본 양식이 있으며, 작업 설명을 입력할 수 있는 입력란, 작업 카테고리를 선택할 수 있는 체크박스 및 제출 버튼이 있습니다 이 튜토리얼에서는 parse object parse object 를 작업에 대해 생성하며, 다음과 같은 속성을 가집니다 parse javascript sdk 데이터 저장 가이드를 참조하여 parse 객체 생성에 대한 자세한 정보를 확인하세요 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 pages/addtodo/index js 구성 요소에서 handlesubmit handlesubmit 메서드를 구현해 보겠습니다 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&#x9; 12 alert alert('new task created '); 13 } catch (error) { 14 console log('error while creating task ', error); 15 } 16 } 그 후, 이제 몇 가지 작업을 생성할 수 있습니다 원하는 만큼 작업을 자유롭게 생성하세요 다음 단계에서는 이 작업들을 쿼리할 것입니다 3 작업 쿼리 및 필터링 작업을 몇 개 생성했으니, 이제 parse react native lib를 사용할 시간입니다 몇 가지 쿼리를 작성하고 useparsequery useparsequery 훅에 전달할 것입니다 쿼리는 학습 카테고리에서 완료되지 않은 모든 작업을 나열합니다 이것은 훅의 첫 번째 사용 사례로, enablelivequery\ false enablelivequery\ false 로 설정하여 한 번만 가져오는 쿼리를 구축할 것입니다 이 쿼리는 학습 페이지 컴포넌트가 렌더링될 때 실행됩니다 enablelivequery enablelivequery 는 기본적으로 true true 이며, false false 로 변경하면 실시간 변경 구독이 비활성화됩니다 pages/learning/index js pages/learning/index js 컴포넌트에서, 우리의 parse query parse query 를 작성해 봅시다 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 useparsequery 훅의 인수로 전달합니다 위 코드는 parse 훅의 기본 사용법을 보여줍니다 useparsequery 훅은 모든 parse query와 함께 사용할 수 있는 새로운 리소스입니다 모든 parse query 기능 https //docs parseplatform org/js/guide/#queries 을 사용하여 데이터 객체를 검색하고 이 훅은 이 경험을 더욱 향상시킬 것입니다 결과를 얻은 후, 이를 tasklist 컴포넌트에 전달하여 앱에서 작업을 표시합니다 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&#x9; 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&#x9; 14 const {results, isloading} = useparsequery(query, {enablelivequery false}); 15&#x9; 16 if (isloading) { 17 return \<activityindicator/>; 18 } 19&#x9; 20 return \<tasklist todos={results} />; 21 }; 22&#x9; 23 export default learning; 귀하의 앱은 다음과 같이 작업 목록을 성공적으로 표시해야 합니다 4 실시간 변경 사항 당신이 탐색할 두 번째 사용법은 실시간 업데이트입니다 useparsequery useparsequery 훅은 parse live query를 캡슐화하고 실시간 변경 사항에 대한 즉각적인 지원을 제공합니다 훅에 쿼리를 전달하면 back4app livequery 서버와 통신하기 위해 websocket 연결이 생성되며, 이는 자동으로 동기화됩니다 이 기능을 쇼핑 카테고리의 작업에 추가할 것입니다 live query와 back4app 서브도메인이 back4app 대시보드 앱에서 활성화되어야 한다는 점에 유의하는 것이 중요합니다 이를 수행하면 서브도메인 url을 initializeparse initializeparse 에 추가하면 parse react native 훅의 결과는 항상 업데이트된 데이터를 갖게 됩니다 서브도메인을 구성하지 않으면, useparsequery useparsequery 훅은 실시간으로 데이터를 검색할 수 없습니다 1 // src/index js 2 initializeparse( 3 '\<yoursubdomain> b4a io', 4 'application id', 5 'javascript key' 6 ); 다음으로, pages/shopping/index js pages/shopping/index js 컴포넌트에서 우리의 parse query parse query 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 useparsequery 훅의 인수로 전달합니다 실시간 변경 사항이 기본적으로 활성화되어 있으므로 추가 매개변수가 필요하지 않음을 유의하십시오 결과를 얻은 후, 이를 다음으로 전달하여 tasklist tasklist 구성 요소에 작업을 표시합니다 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&#x9; 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&#x9; 13 const {results, isloading, issyncing} = useparsequery(query); 14&#x9; 15 if (isloading || issyncing) { 16 return \<activityindicator />; 17 } 18 return \<tasklist todos={results || \[]} />; 19 }; 20&#x9; 21 export default shopping; 5 오프라인 지원 세 번째 사용 사례는 @parse/react native @parse/react native 를 사용하여 쿼리 결과의 오프라인 캐싱을 사용하는 것입니다 이는 사용자가 네트워크 지연이나 인터넷 연결 문제를 겪을 때 react native 앱이 작동해야 할 경우 유용합니다 오프라인 지원은 react native 앱의 반응성과 사용자 경험을 향상시킵니다 좋은 소식은 추가 단계가 필요하지 않다는 것입니다! 오프라인 우선 접근 방식과 실시간 구독이 기본적으로 활성화되어 있습니다 간단히 말해, useparsequery useparsequery 훅을 사용하면 사용자가 다시 온라인으로 돌아갈 때 오프라인 지원을 위해 쿼리 결과를 캐싱하고 라이브 쿼리 구독과 결합된다는 것을 보장합니다 6 쿼리 제한 및 정렬 작업 카테고리의 작업 목록이 한 사람이 처리하기에는 너무 많고, 하루에 대한 하위 집합만 표시하고 싶다고 가정해 보겠습니다 또한 생성 날짜로 정렬합니다 다음의 pages/shopping/index js pages/shopping/index js 구성 요소에서, 우리의 parse query parse query 를 작성해 보겠습니다 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 useparsequery 훅에 인수로 전달하고 이를 tasklist tasklist 컴포넌트에 전달하여 앱에서 작업을 표시합니다 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&#x9; 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&#x9; 16 const {results, isloading} = useparsequery(query, { 17 enablelivequery false, 18 }); 19&#x9; 20 if (isloading) { 21 return \<activityindicator />; 22 } 23 return \<tasklist todos={results} />; 24 }; 25&#x9; 26 export default work; 7 useparsequery 인수 지정하기 이전 단계에서 live query와 같은 기능을 사용하여 back4app에서 데이터를 검색하기 위해 @parse/react native @parse/react native 를 사용했습니다 따라서 내보낸 인터페이스에 대한 설명이 필요합니다 useparsequery useparsequery 훅은 parse query parse query 와 useparsequeryoptions useparsequeryoptions 객체를 인수로 받습니다 기본 선택적 구성 객체는 다음과 같습니다 1 { 2 enablelivequery true, 3 enablelocaldatastore true, 4 initialload \[] 5 } enablelivequery 실시간 라이브 쿼리 기능이 기본적으로 활성화되어 있습니다 enablelocaldatastore 데이터 결과의 로컬 캐싱을 활성화하며, 기본값은 true true 이지만 false false 로 설정하여 끌 수 있습니다 initialload 이미 메모리에 데이터가 로드되어 있다면, 사용자에게 데이터 미리보기를 보여주도록 설정할 수 있습니다 완료되었습니다! 이 시점에서, 당신은 @parse/react native @parse/react native 라이브러리를 사용하여 back4app에서 react native todo 앱을 만드는 방법을 배웠습니다