React에서 Parse로 관계형 쿼리 구현 및 사용 방법

파스에서 리액트를 사용한 관계형 쿼리 소개 이 가이드에서는 parse에서 관계형 쿼리를 수행하고 이러한 쿼리를 사용하여 react 컴포넌트를 구현합니다 back4app과 react를 사용하여 현실적인 데이터를 설정하고 쿼리하는 방법을 배웁니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 react 앱이 생성되고 back4app에 연결됨 이 가이드의 예제 프로젝트를 실행하려면 ant design ant design 라이브러리를 설정해야 합니다 목표 react 앱에서 back4app에 저장된 관계형 데이터를 쿼리합니다 1 parse query 클래스 이해하기 모든 parse 쿼리 작업은 parse query parse query 객체 유형을 사용하며, 이를 통해 앱 전반에 걸쳐 데이터베이스에서 특정 데이터를 검색할 수 있습니다 parse query parse query 는 검색 메서드(예 parse query find parse query find 또는 parse query first parse query first 호출 후에만 해결된다는 것을 아는 것이 중요합니다 따라서 쿼리를 설정하고 실제로 호출되기 전에 여러 수정자를 연결할 수 있습니다 새로운 parse query parse query 를 생성하려면, 원하는 parse object parse object 서브클래스를 매개변수로 전달해야 합니다 아래에서 볼 수 있는 예제 쿼리는 허구의 book book 서브클래스를 쿼리하고 있습니다 1 // this will create your query 2 let parsequery = new parse query("book"); 3 // the query will resolve only after calling this method 4 let queryresult = await parsequery find(); 다음에 대해 더 읽을 수 있습니다 parse query parse query 클래스 공식 문서에서 여기 https //parseplatform org/parse sdk js/api/master/parse query html 2 back4app에 데이터 저장하기 다양한 클래스를 생성해 보겠습니다 이 클래스들은 이 가이드에서 우리의 쿼리 대상이 될 것입니다 클래스는 다음과 같습니다 저자 저자 , 책 책 , 출판사 출판사 및 서점 서점 , 여기서 책 책 은 출판사 출판사 와 1\ n 관계를 가지며 저자 저자 와 n\ n 관계를 가집니다 그리고 서점 서점 은 책 책 과 n\ n 관계를 가집니다 parse js 콘솔에서는 javascript 코드를 직접 실행하여 js sdk 명령을 사용하여 애플리케이션 데이터베이스 내용을 쿼리하고 업데이트할 수 있습니다 아래 코드를 js 콘솔에서 실행하고 back4app에 데이터를 삽입하세요 대시보드에서 js 콘솔의 모습은 다음과 같습니다 계속해서 다음 예제 내용을 사용하여 클래스를 생성하세요 1 // add objects and create tables 2 // authors 3 const authora = new parse object('author'); 4 authora set('name', 'aaron writer'); 5 await authora save(); 6&#x9; 7 const authorb = new parse object('author'); 8 authorb set('name', 'beatrice novelist'); 9 await authorb save(); 10&#x9; 11 const authorc = new parse object('author'); 12 authorc set('name', 'casey columnist'); 13 await authorc save(); 14&#x9; 15 // publishers 16 const publishera = new parse object('publisher'); 17 publishera set('name', 'acacia publishings'); 18 await publishera save(); 19&#x9; 20 const publisherb = new parse object('publisher'); 21 publisherb set('name', 'birch distributions'); 22 await publisherb save(); 23&#x9; 24 // books 25 const booka = new parse object('book'); 26 booka set('title', 'a love story'); 27 booka set('publisher', publishera); 28 booka set('publishingdate', new date('05/07/1998')); 29 const bookarelation = booka relation("authors"); 30 bookarelation add(authora); 31 await booka save(); 32&#x9; 33 const bookb = new parse object('book'); 34 bookb set('title', 'benevolent elves'); 35 bookb set('publisher', publisherb); 36 bookb set('publishingdate', new date('11/31/2008')); 37 const bookbrelation = bookb relation("authors"); 38 bookbrelation add(authorb); 39 await bookb save(); 40&#x9; 41 const bookc = new parse object('book'); 42 bookc set('title', 'can you believe it?'); 43 bookc set('publisher', publisherb); 44 bookc set('publishingdate', new date('08/21/2018')); 45 const bookcrelation = bookc relation("authors"); 46 bookcrelation add(authora); 47 bookcrelation add(authorc); 48 await bookc save(); 49&#x9; 50 // bookstore 51 const bookstorea = new parse object('bookstore'); 52 bookstorea set('name', 'books of love'); 53 const bookstorearelation = bookstorea relation("books"); 54 bookstorearelation add(booka); 55 await bookstorea save(); 56&#x9; 57 const bookstoreb = new parse object('bookstore'); 58 bookstoreb set('name', 'fantasy books'); 59 const bookstorebrelation = bookstoreb relation("books"); 60 bookstorebrelation add(bookb); 61 await bookstoreb save(); 62&#x9; 63 const bookstorec = new parse object('bookstore'); 64 bookstorec set('name', 'general books'); 65 const bookstorecrelation = bookstorec relation("books"); 66 bookstorecrelation add(booka); 67 bookstorecrelation add(bookc); 68 await bookstorec save(); 69&#x9; 70 console log('success'); 3 데이터 쿼리 모든 클래스를 채웠으므로 이제 그 안에서 관계형 쿼리를 수행할 수 있습니다 먼저 책 책 결과를 출판사 출판사 로 필터링하여 “acacia publishings” (또는 “publisher a”)에 속하는 책을 찾기 위해 기본 parse query equalto parse query equalto 메서드를 사용합니다 1 // get publishera object 2 const publisheraquery = new parse query('publisher'); 3 publisheraquery equalto('name', 'acacia publishings'); 4 const publishera = await publisheraquery first(); 5&#x9; 6 // query books with publishera 7 const bookquery = new parse query('book'); 8 bookquery equalto('publisher', publishera); 9 let queryresults = await bookquery find(); 10&#x9; 11 // let's show the results 12 for (let result of queryresults) { 13 // you access `parse objects` attributes by using ` get` 14 console log(result get('title')); 15 }; 이제 bookstore bookstore 객체가 book book 객체를 포함하는지 쿼리해 보겠습니다 출판 날짜가 2010년 1월 1일 이후인 객체를 찾기 위해 parse query greaterthan parse query greaterthan 메서드를 사용하고, 그 다음에 parse query matchesquery parse query matchesquery 메서드를 사용합니다 1 // create inner book query 2 const bookquery = new parse query('book'); 3 bookquery greaterthan('publishingdate', new date('01/01/2010')); 4&#x9; 5 // query bookstore using inner book query 6 const bookstorequery = new parse query('bookstore'); 7 bookstorequery matchesquery('books', bookquery); 8 let queryresults = await bookstorequery find(); 9&#x9; 10 // let's show the results 11 for (let result of queryresults) { 12 // you access `parse objects` attributes by using ` get` 13 console log(result get('name')); 14 }; 이제 최소한 하나의 bookstore bookstore 객체를 찾는 더 복잡한 관계 쿼리를 만들어 보겠습니다 book book 이 author author “aaron writer” (또는 “authora”)에 의해 작성된 equalto equalto 와 matchesquery matchesquery 1 // get authora object 2 const authoraquery = new parse query('author'); 3 authoraquery equalto('name', 'aaron writer'); 4 const authora = await authoraquery first(); 5&#x9; 6 // create inner book query 7 const bookquery = new parse query('book'); 8 bookquery equalto('authors', authora); 9&#x9; 10 // query bookstore using inner book query 11 const bookstorequery = new parse query('bookstore'); 12 bookstorequery matchesquery('books', bookquery); 13 let queryresults = await bookstorequery find(); 14&#x9; 15 // let's show the results 16 for (let result of queryresults) { 17 // you access `parse objects` attributes by using ` get` 18 console log(result get('name')); 19 }; 4 react 컴포넌트에서 쿼리하기 이제 react의 컴포넌트 내에서 예제 쿼리를 사용해 보겠습니다 결과를 보여주는 목록과 쿼리를 호출하는 버튼이 있는 간단한 인터페이스를 가지고 있습니다 컴포넌트 코드가 이렇게 배치되어 있습니다 doquery doquery 함수는 이전의 예제 코드를 포함하고 있습니다 javascript 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, divider } from 'antd'; 5 import { closeoutlined, searchoutlined } from '@ant design/icons'; 6&#x9; 7 export const queryrelational = () => { 8 // state variable 9 const \[queryresults, setqueryresults] = usestate(); 10&#x9; 11 const doquerya = async function () { 12 // get publishera object 13 const publisheraquery = new parse query('publisher'); 14 publisheraquery equalto('name', 'acacia publishings'); 15 const publishera = await publisheraquery first(); 16&#x9; 17 // query books with publishera 18 const bookquery = new parse query('book'); 19 bookquery equalto('publisher', publishera); 20&#x9; 21 try { 22 let results = await bookquery find(); 23 setqueryresults(results); 24 return true; 25 } catch (error) { 26 // error can be caused by lack of internet connection 27 alert(`error! ${error message}`); 28 return false; 29 } 30 }; 31&#x9; 32 const doqueryb = async function () { 33 // create inner book query 34 const bookquery = new parse query('book'); 35 bookquery greaterthan('publishingdate', new date('01/01/2010')); 36&#x9; 37 // query bookstore using inner book query 38 const bookstorequery = new parse query('bookstore'); 39 bookstorequery matchesquery('books', bookquery); 40&#x9; 41 try { 42 let results = await bookstorequery find(); 43 setqueryresults(results); 44 return true; 45 } catch (error) { 46 // error can be caused by lack of internet connection 47 alert(`error! ${error message}`); 48 return false; 49 } 50 }; 51&#x9; 52 const doqueryc = async function () { 53 // get authora object 54 const authoraquery = new parse query('author'); 55 authoraquery equalto('name', 'aaron writer'); 56 const authora = await authoraquery first(); 57&#x9; 58 // create inner book query 59 const bookquery = new parse query('book'); 60 bookquery equalto('authors', authora); 61&#x9; 62 // query bookstore using inner book query 63 const bookstorequery = new parse query('bookstore'); 64 bookstorequery matchesquery('books', bookquery); 65&#x9; 66 try { 67 let results = await bookstorequery find(); 68 setqueryresults(results); 69 return true; 70 } catch (error) { 71 // error can be caused by lack of internet connection 72 alert(`error! ${error message}`); 73 return false; 74 } 75 }; 76&#x9; 77 const clearqueryresults = async function () { 78 setqueryresults(undefined); 79 return true; 80 }; 81&#x9; 82 return ( 83 \<div> 84 \<div classname="header"> 85 \<img 86 classname="header logo" 87 alt="back4app logo" 88 src={ 89 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 90 } 91 /> 92 \<p classname="header text bold">{'react on back4app'}\</p> 93 \<p classname="header text">{'relational queries'}\</p> 94 \</div> 95 \<div classname="container"> 96 \<div classname="flex between"> 97 \<h2 classname="heading">{'query list'}\</h2> 98 \<div classname="flex"> 99 \<button 100 onclick={() => doquerya()} 101 type="primary" 102 classname="heading button" 103 color={'#208aec'} 104 icon={\<searchoutlined />} 105 > 106 query a 107 \</button> 108 \<button 109 onclick={() => doqueryb()} 110 type="primary" 111 classname="heading button" 112 color={'#208aec'} 113 icon={\<searchoutlined />} 114 > 115 query b 116 \</button> 117 \<button 118 onclick={() => doqueryc()} 119 type="primary" 120 classname="heading button" 121 color={'#208aec'} 122 icon={\<searchoutlined />} 123 > 124 query c 125 \</button> 126 \<button 127 onclick={() => clearqueryresults()} 128 type="primary" 129 classname="heading button" 130 color={'#208aec'} 131 icon={\<closeoutlined />} 132 > 133 clear results 134 \</button> 135 \</div> 136 \</div> 137 \<divider /> 138 \<div classname="flex between"> 139 \<div classname="flex child"> 140 {/ query list /} 141 {queryresults !== undefined && 142 queryresults map((result, index) => ( 143 \<div classname="list item" key={`${index}`}> 144 \<p classname="list item title">{`${ 145 result get('name') !== undefined 146 ? result get('name') 147 result get('title') 148 }`}\</p> 149 \</div> 150 ))} 151 {queryresults !== undefined && queryresults length <= 0 ? ( 152 \<p>{'no results here!'}\</p> 153 ) null} 154 \</div> 155 \</div> 156 \</div> 157 \</div> 158 ); 159 }; typescript 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, divider } from 'antd'; 4 import { closeoutlined, searchoutlined } from '@ant design/icons'; 5 const parse = require('parse/dist/parse min js'); 6&#x9; 7 export const queryrelational fc<{}> = () reactelement => { 8 // state variable 9 const \[queryresults, setqueryresults] = usestate\<parse object\[]>(); 10&#x9; 11 const doquerya = async function () promise\<boolean> { 12 // get publishera object 13 const publisheraquery parse query = new parse query('publisher'); 14 publisheraquery equalto('name', 'acacia publishings'); 15 const publishera parse object | undefined = await publisheraquery first(); 16&#x9; 17 // query books with publishera 18 const bookquery parse query = new parse query('book'); 19 bookquery equalto('publisher', publishera); 20&#x9; 21 try { 22 let results parse object\[] = await bookquery find(); 23 setqueryresults(results); 24 return true; 25 } catch (error) { 26 // error can be caused by lack of internet connection 27 alert(`error! ${error message}`); 28 return false; 29 } 30 }; 31&#x9; 32 const doqueryb = async function () promise\<boolean> { 33 // create inner book query 34 const bookquery parse query = new parse query('book'); 35 bookquery greaterthan('publishingdate', new date('01/01/2010')); 36&#x9; 37 // query bookstore using inner book query 38 const bookstorequery parse query = new parse query('bookstore'); 39 bookstorequery matchesquery('books', bookquery); 40&#x9; 41 try { 42 let results parse object\[] = await bookstorequery find(); 43 setqueryresults(results); 44 return true; 45 } catch (error) { 46 // error can be caused by lack of internet connection 47 alert(`error! ${error message}`); 48 return false; 49 } 50 }; 51&#x9; 52 const doqueryc = async function () promise\<boolean> { 53 // get authora object 54 const authoraquery parse query = new parse query('author'); 55 authoraquery equalto('name', 'aaron writer'); 56 const authora parse object | undefined = await authoraquery first(); 57&#x9; 58 // create inner book query 59 const bookquery parse query = new parse query('book'); 60 bookquery equalto('authors', authora); 61&#x9; 62 // query bookstore using inner book query 63 const bookstorequery parse query = new parse query('bookstore'); 64 bookstorequery matchesquery('books', bookquery); 65&#x9; 66 try { 67 let results parse object\[] = await bookstorequery find(); 68 setqueryresults(results); 69 return true; 70 } catch (error) { 71 // error can be caused by lack of internet connection 72 alert(`error! ${error message}`); 73 return false; 74 } 75 }; 76&#x9; 77 const clearqueryresults = async function () promise\<boolean> { 78 setqueryresults(undefined); 79 return true; 80 }; 81&#x9; 82 return ( 83 \<div> 84 \<div classname="header"> 85 \<img 86 classname="header logo" 87 alt="back4app logo" 88 src={ 89 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 90 } 91 /> 92 \<p classname="header text bold">{'react on back4app'}\</p> 93 \<p classname="header text">{'relational queries'}\</p> 94 \</div> 95 \<div classname="container"> 96 \<div classname="flex between"> 97 \<h2 classname="heading">{'query list'}\</h2> 98 \<div classname="flex"> 99 \<button 100 onclick={() => doquerya()} 101 type="primary" 102 classname="heading button" 103 color={'#208aec'} 104 icon={\<searchoutlined />} 105 > 106 query a 107 \</button> 108 \<button 109 onclick={() => doqueryb()} 110 type="primary" 111 classname="heading button" 112 color={'#208aec'} 113 icon={\<searchoutlined />} 114 > 115 query b 116 \</button> 117 \<button 118 onclick={() => doqueryc()} 119 type="primary" 120 classname="heading button" 121 color={'#208aec'} 122 icon={\<searchoutlined />} 123 > 124 query c 125 \</button> 126 \<button 127 onclick={() => clearqueryresults()} 128 type="primary" 129 classname="heading button" 130 color={'#208aec'} 131 icon={\<closeoutlined />} 132 > 133 clear results 134 \</button> 135 \</div> 136 \</div> 137 \<divider /> 138 \<div classname="flex between"> 139 \<div classname="flex child"> 140 {/ query list /} 141 {queryresults !== undefined && 142 queryresults map((result parse object, index number) => ( 143 \<div classname="list item" key={`${index}`}> 144 \<p classname="list item title">{`${result get('name') !== undefined ? result get('name') result get('title')}`}\</p> 145 \</div> 146 ))} 147 {queryresults !== undefined && 148 queryresults length <= 0 ? ( 149 \<p>{'no results here!'}\</p> 150 ) null} 151 \</div> 152 \</div> 153 \</div> 154 \</div> 155 ); 156 }; 또한 이 클래스를 app css app css 파일에 추가하여 구성 요소 레이아웃을 완전히 렌더링하세요 app css 1 @import ' antd/dist/antd css'; 2&#x9; 3 app { 4 text align center; 5 } 6&#x9; 7 html { 8 box sizing border box; 9 outline none; 10 overflow auto; 11 } 12&#x9; 13 , 14 before, 15 after { 16 margin 0; 17 padding 0; 18 box sizing inherit; 19 } 20&#x9; 21 h1, 22 h2, 23 h3, 24 h4, 25 h5, 26 h6 { 27 margin 0; 28 font weight bold; 29 } 30&#x9; 31 p { 32 margin 0; 33 } 34&#x9; 35 body { 36 margin 0; 37 background color #fff; 38 } 39&#x9; 40 container { 41 width 100%; 42 max width 900px; 43 margin auto; 44 padding 20px 0; 45 text align left; 46 } 47&#x9; 48 header { 49 align items center; 50 padding 25px 0; 51 background color #208aec; 52 } 53&#x9; 54 header logo { 55 height 55px; 56 margin bottom 20px; 57 object fit contain; 58 } 59&#x9; 60 header text bold { 61 margin bottom 3px; 62 color rgba(255, 255, 255, 0 9); 63 font size 16px; 64 font weight bold; 65 } 66&#x9; 67 header text { 68 color rgba(255, 255, 255, 0 9); 69 font size 15px; 70 } 71&#x9; 72 heading { 73 font size 22px; 74 } 75&#x9; 76 flex { 77 display flex; 78 } 79&#x9; 80 flex between { 81 display flex; 82 justify content space between; 83 } 84&#x9; 85 flex child { 86 flex 0 0 45%; 87 } 88&#x9; 89 heading button { 90 margin left 12px; 91 } 92&#x9; 93 list item { 94 padding bottom 15px; 95 margin bottom 15px; 96 border bottom 1px solid rgba(0,0,0,0 06); 97 text align left; 98 } 99&#x9; 100 list item title { 101 color rgba(0,0,0,0 87); 102 font size 17px; 103 } 렌더링 및 쿼리 함수 중 하나로 쿼리한 후 컴포넌트가 어떻게 보여야 하는지입니다 결론 이 가이드의 끝에서, parse에서 관계형 쿼리가 어떻게 작동하는지와 react 앱에서 back4app에서 이를 수행하는 방법을 배웠습니다 다음 가이드에서는 parse에서 사용자와 작업하는 방법을 배울 것입니다