React에서 Parse 객체 관계 생성 및 쿼리 방법

14 분

관계 소개 parse를 사용하면 데이터 객체를 저장하고 그들 간의 관계를 설정할 수 있습니다 이 동작을 모델링하기 위해, 어떤 \parseobject \ 도 다른 \parseobject\ 내부적으로 parse 프레임워크는 참조된 객체를 한 곳에 저장하여 일관성을 유지합니다 이는 복잡한 쿼리를 구축하고 실행할 때 추가적인 힘을 줄 수 있습니다 세 가지 주요 관계 유형이 있습니다 \일대다\ , 하나의 객체가 여러 다른 객체와 관련될 수 있는 경우; \다대다\ , 여러 객체 간에 복잡한 관계를 생성할 수 있는 경우 \일대일\ , 두 객체 간에 직접적인 관계를 설정하고 오직 그들만을 위한 경우; parse에서 \일대다\ 관계를 생성하는 두 가지 방법이 있습니다 (추천) 첫 번째는 자식 클래스에서 \parse 포인터\ 를 사용하는 것으로, 생성 및 쿼리 시간에서 가장 빠릅니다 이 가이드에서는 이를 사용할 것입니다 두 번째는 부모 클래스에서 \배열\ 을 사용하는 것으로, 크기에 따라 느린 쿼리 시간으로 이어질 수 있습니다 이러한 성능 문제로 인해 우리는 포인터 예제만 사용할 것입니다 parse에서 \다대다\ 관계를 생성하는 세 가지 방법이 있습니다 (추천) 첫 번째는 \parse relations\ , 생성 및 쿼리 시간에서 가장 빠릅니다 이 가이드에서 이를 사용할 것입니다 두 번째는 \배열\ 의 \parse pointers\ 로, 크기에 따라 느린 쿼리 시간이 발생할 수 있습니다 세 번째는 \jointable\ 로, 고전 데이터베이스의 아이디어에서 출발합니다 다대다 관계가 있을 때, 우리는 모든 \objectid \ 또는 \pointer\ 를 양쪽에서 결합하여 관계가 추적되는 새로운 별도의 테이블을 만듭니다 이 가이드에서는 세 가지 주요 데이터 연관을 포함하는 react 도서 등록 애플리케이션을 구현합니다 back4app과 react를 사용하여 데이터 관계를 생성하고 쿼리하는 방법을 배웁니다 언제든지 이 프로젝트에 접근하여 스타일과 전체 코드를 확인할 수 있습니다 javascript 예제 저장소 https //github com/templates back4app/react js associations typescript 예제 저장소 https //github com/templates back4app/react ts associations 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 react 앱이 생성되고 back4app에 연결됨 https //www back4app com/docs/react/quickstart 이 가이드의 예제 프로젝트를 실행하려면 라이브러리를 설정해야 합니다 https //ant design/ 목표 react에서 parse를 사용하여 현실적인 시나리오에서 데이터베이스 관계를 수행하고 시연하기 위해 1 book 클래스 이해하기 이 가이드에서는 도서 등록 애플리케이션 예제를 사용할 것이므로, 먼저 이 데이터베이스에서 객체 관계가 어떻게 구성되어 있는지 이해해야 합니다 사용하게 될 주요 객체 클래스는 \book \ 클래스로, 등록된 각 도서 항목을 저장합니다 나머지 네 개의 객체 클래스는 다음과 같습니다 \출판사\ 도서 출판사 이름, \book\ 과의 일대다 관계; \장르\ 도서 장르, \book\ , 과의 일대다 관계 이 예제에서는 도서가 하나의 장르만 가질 수 있다고 가정합니다; \저자\ 도서 저자, \book\ , 과의 다대다 관계, 도서는 여러 저자를 가질 수 있고 저자도 여러 도서를 가질 수 있습니다; \isdb\ 도서 isdb 식별 번호, \book\ , 과의 일대일 관계, 이 번호는 각 도서에 대해 고유합니다 다음은 이러한 데이터베이스 테이블의 시각적 표현입니다 간단히 하기 위해, 각 객체 클래스가 문자열 유형의 \이름\ 속성만 가지고 있다고 가정하겠습니다 ( \제목 \ 은 \책\ 에 대해, 추가적인 관계 속성은 제외합니다 단계 2 관계 생성 이 단계로 들어가기 전에 react 앱 예제를 복제하고 실행할 것을 권장합니다 ( javascript 예제 저장소 https //github com/templates back4app/react js associations , typescript 예제 저장소 https //github com/templates back4app/react ts associations ) 이 애플리케이션은 등록된 책을 나열하는 화면과 새로운 책을 생성하는 화면의 두 가지 주요 화면을 가지고 있습니다 책 등록 양식에는 다른 관련 객체에 대한 직접 링크와 책의 isbd 값에 할당된 텍스트 입력 필드가 있으며, 이는 일대일 관계를 생성하는 데 사용됩니다 이 양식을 제출할 때 호출되는 책 생성 방법을 살펴보겠습니다 javascript 1 const createbook = async function () { 2 try { 3 // these values come from state variables linked to 4 // the screen form fields, retrieving the user choices 5 // as a complete parse object, when applicable; 6 const booktitlevalue = booktitle; 7 const bookisbdvalue = bookisbd; 8 // for example, bookpublisher holds the value from 9 // radiogroup field with its options being every 10 // publisher parse object instance saved on server, which is 11 // queried on screen load via useeffect 12 const bookpublisherobject = bookpublisher; 13 const bookgenreobject = bookgenre; 14 // bookauthors can be an array of parse objects, since the book 15 // may have more than one author 16 const bookauthorsobjects = bookauthors; 17 18 // creates a new parse object instance 19 let book = new parse object('book'); 20 21 // set data to parse object 22 // simple title field 23 book set('title', booktitlevalue); 24 25 // one to one (1 1) 26 // 1 1 relation, need to check for uniqueness of value before creating a new isbd object 27 let isbdquery = new parse query('isbd'); 28 isbdquery equalto('name', bookisbdvalue); 29 let isbdqueryresult = await isbdquery first(); 30 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 31 // if first returns a valid object instance, it means that there 32 // is at least one instance of isbd with the informed value 33 alert( 34 'error! there is already an isbd instance with this value!', 35 ); 36 return false; 37 } else { 38 // create a new isbd object instance to create a one to one relation on saving 39 let isbd = new parse object('isbd'); 40 isbd set('name', bookisbdvalue); 41 isbd = await isbd save(); 42 // set the new object to the new book object isbd field 43 book set('isbd', isbd); 44 } 45 46 // one to many (1\ n) 47 // one to many relations can be set in two ways 48 // add direct object to field (parse will convert to pointer on save) 49 book set('publisher', bookpublisherobject); 50 // or add pointer to field 51 book set('genre', bookgenreobject topointer()); 52 53 // many to many (n\ n) 54 // create a new relation so data can be added 55 let authorsrelation = book relation('authors'); 56 // bookauthorsobjects is an array of parse objects, 57 // you can add to relation by adding the whole array or object by object 58 authorsrelation add(bookauthorsobjects); 59 60 // after setting the values, save it on the server 61 try { 62 await book save(); 63 // success 64 alert('success!'); 65 // navigate back to home screen using react router 66 history push('/'); 67 return true; 68 } catch (error) { 69 // error can be caused by lack of internet connection 70 alert(`error! ${error message}`); 71 return false; 72 } 73 } catch (error) { 74 // error can be caused by lack of value selection 75 alert( 76 'error! make sure to select valid choices in publisher, genre and author fields!', 77 ); 78 return false; 79 } 80 }; typescript 1 const createbook = async function () promise\<boolean> { 2 try { 3 // these values come from state variables linked to 4 // the screen form fields, retrieving the user choices 5 // as a complete parse object, when applicable; 6 const booktitlevalue string = booktitle; 7 const bookisbdvalue string = bookisbd; 8 // for example, bookpublisher holds the value from 9 // radiobutton group field with its options being every 10 // publisher parse object instance saved on server, which is 11 // queried on screen load via useeffect 12 const bookpublisherobject parse object = bookpublisher; 13 const bookgenreobject parse object = bookgenre; 14 // bookauthors can be an array of parse objects, since the book 15 // may have more than one author 16 const bookauthorsobjects \[parse object] = bookauthors; 17 18 // creates a new parse object instance 19 let book parse object = new parse object('book'); 20 21 // set data to parse object 22 // simple title field 23 book set('title', booktitlevalue); 24 25 // one to one (1 1) 26 // 1 1 relation, need to check for uniqueness of value before creating a new isbd object 27 let isbdquery parse query = new parse query('isbd'); 28 isbdquery equalto('name', bookisbdvalue); 29 let isbdqueryresult parse object = await isbdquery first(); 30 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 31 // if first returns a valid object instance, it means that there 32 // is at least one instance of isbd with the informed value 33 alert( 34 'error! there is already an isbd instance with this value!', 35 ); 36 return false; 37 } else { 38 // create a new isbd object instance to create a one to one relation on saving 39 let isbd parse object = new parse object('isbd'); 40 isbd set('name', bookisbdvalue); 41 isbd = await isbd save(); 42 // set the new object to the new book object isbd field 43 book set('isbd', isbd); 44 } 45 46 // one to many (1\ n) 47 // one to many relations can be set in two ways 48 // add direct object to field (parse will convert to pointer on save) 49 book set('publisher', bookpublisherobject); 50 // or add pointer to field 51 book set('genre', bookgenreobject topointer()); 52 53 // many to many (n\ n) 54 // create a new relation so data can be added 55 let authorsrelation = book relation('authors'); 56 // bookauthorsobjects is an array of parse objects, 57 // you can add to relation by adding the whole array or object by object 58 authorsrelation add(bookauthorsobjects); 59 60 // after setting the values, save it on the server 61 try { 62 await book save(); 63 // success 64 alert('success!'); 65 // navigate back to home screen using react router 66 history push('/'); 67 return true; 68 } catch (error) { 69 // error can be caused by lack of internet connection 70 alert(`error! ${error message}`); 71 return false; 72 } 73 } catch (error) { 74 // error can be caused by lack of value selection 75 alert( 76 'error! make sure to select valid choices in publisher, genre and author fields!', 77 ); 78 return false; 79 } 80 }; 이제 세 가지 유형의 연관 관계가 \책 \ 객체를 생성할 때 어떻게 이루어지는지 따로 살펴보겠습니다 일대다 관계 어떻게 \bookpublisherobject \ 와 \bookgenreobject\ 가 새로운 책 \parse object\ 인스턴스에 설정되는지 주목하세요 parse에서 일대다 관계를 생성하는 것이 얼마나 간단한지 보세요 대상 객체 인스턴스를 할당하거나 \parse object set \ 메서드를 사용하여 포인터를 설정할 수 있습니다 이 메서드는 두 개의 인수를 받습니다 필드 이름과 설정할 값입니다 parse는 포인터 데이터 유형 열을 생성하고 대시보드에서 빠른 액세스를 위한 직접 링크를 생성합니다 다대다 관계 어떻게 \bookauthorsobjects \ 가 새로운 책 \parse object\ 인스턴스에 설정되는지 보세요 다대다 관계를 생성하려면 먼저 새로운 \parse object relation\ 을 생성한 다음 관련 객체를 하나씩 추가하거나 \parse object\ 의 배열을 전달하여 추가해야 합니다 \parse object relation add\ 메서드를 사용합니다 parse는 관계 유형 열을 생성하고 데이터베이스에 관계형 테이블을 생성합니다 또한 parse는 대시보드의 필드 열에서 이 새로운 테이블에 쉽게 접근할 수 있는 링크를 생성합니다 일대일 관계 다음과 같이 \bookisbdvalue \ 가 새로운 책 \parse objec\ t 인스턴스로 설정되는지 확인하세요 parse에서 일대일 및 일대다 관계를 생성하고 저장하는 과정은 유사하며, \parse object \ 인스턴스를 \parse object set\ 메서드를 사용하여 인수로 전달합니다 이 메서드는 필드 이름과 설정할 값을 인수로 받습니다 여기서 주의할 점은 저장하기 전에 데이터베이스에 정보가 제공된 isbd id 문자열 값을 포함하는 \isbd\ 객체가 없고, 이미 관련된 \book \ 객체가 없도록 해야 한다는 것입니다 두 번째 부분은 항상 참이 될 것입니다 왜냐하면 매번 새로운 \book \ 객체를 생성하고 있기 때문입니다 \isbd \ 의 고유성을 보장하기 위해 다음과 같은 하이라이트된 쿼리를 사용할 수 있습니다 javascript 1 let isbdquery = new parse query('isbd'); 2 isbdquery equalto('name', bookisbdvalue); 3 let isbdqueryresult = await isbdquery first(); 4 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 5 // if first returns a valid object instance, it means that there 6 // is at least one instance of isbd with the informed value 7 alert( 8 'error! there is already an isbd instance with this value!', 9 ); 10 return false; 11 } typescript 1 let isbdquery parse query = new parse query('isbd'); 2 isbdquery equalto('name', bookisbdvalue); 3 let isbdqueryresult parse object = await isbdquery first(); 4 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 5 // if first returns a valid object instance, it means that there 6 // is at least one instance of isbd with the informed value 7 alert( 8 'error! there is already an isbd instance with this value!', 9 ); 10 return false; 11 } 객체를 성공적으로 저장한 후, parse는 포인터 데이터 유형 열과 대시보드에 직접 링크를 생성합니다 3 관계 쿼리하기 관련 객체를 쿼리하는 것은 parse에서 대부분 처리되기 때문에 매우 간단합니다 책 등록 목록 화면의 쿼리 기능을 살펴보고, 각 관계 유형이 어떻게 쿼리되는지 강조하겠습니다 javascript 1 const querybooks = async function () { 2 // these values come from state variables linked to 3 // the screen query radiobutton group fields, with its options being every 4 // parse object instance saved on server from the referred class, which is 5 // queried on screen load via useeffect; these variables retrievie the user choices 6 // as a complete parse object; 7 const querypublishervalue = querypublisher; 8 const querygenrevalue = querygenre; 9 const queryauthorvalue = queryauthor; 10 const queryisbdvalue = queryisbd; 11 12 // reading parse objects is done by using parse query 13 const parsequery = new parse query('book'); 14 15 // one to many queries 16 if (querypublishervalue !== '') { 17 parsequery equalto('publisher', querypublishervalue); 18 } 19 if (querygenrevalue !== '') { 20 parsequery equalto('genre', querygenrevalue); 21 } 22 23 // one to one query 24 if (queryisbdvalue !== '') { 25 parsequery equalto('isbd', queryisbdvalue); 26 } 27 28 // many to many query 29 // in this case, we need to retrieve books related to the chosen author 30 if (queryauthorvalue !== '') { 31 parsequery equalto('authors', queryauthorvalue); 32 } 33 34 try { 35 let books = await parsequery find(); 36 // many to many objects retrieval 37 // in this example we need to get every related author parse object 38 // and add it to our query result objects 39 for (let book of books) { 40 // this query is done by creating a relation and querying it 41 let bookauthorsrelation = book relation('authors'); 42 book authorsobjects = await bookauthorsrelation query() find(); 43 } 44 setqueriedbooks(books); 45 return true; 46 } catch (error) { 47 // error can be caused by lack of internet connection 48 alert(`error! ${error message}`); 49 return false; 50 } 51 }; typescript 1 const querybooks = async function () promise\<boolean> { 2 // these values come from state variables linked to 3 // the screen query radiobutton group fields, with its options being every 4 // parse object instance saved on server from the referred class, which is 5 // queried on screen load via useeffect; these variables retrievie the user choices 6 // as a complete parse object; 7 const querypublishervalue parse object = querypublisher; 8 const querygenrevalue parse object = querygenre; 9 const queryauthorvalue parse object = queryauthor; 10 const queryisbdvalue parse object = queryisbd; 11 12 // reading parse objects is done by using parse query 13 const parsequery parse query = new parse query('book'); 14 15 // one to many queries 16 if (querypublishervalue !== '') { 17 parsequery equalto('publisher', querypublishervalue); 18 } 19 if (querygenrevalue !== '') { 20 parsequery equalto('genre', querygenrevalue); 21 } 22 23 // one to one query 24 if (queryisbdvalue !== '') { 25 parsequery equalto('isbd', queryisbdvalue); 26 } 27 28 // many to many query 29 // in this case, we need to retrieve books related to the chosen author 30 if (queryauthorvalue !== '') { 31 parsequery equalto('authors', queryauthorvalue); 32 } 33 34 try { 35 let books \[parse object] = await parsequery find(); 36 // many to many objects retrieval 37 // in this example we need to get every related author parse object 38 // and add it to our query result objects 39 for (let book of books) { 40 // this query is done by creating a relation and querying it 41 let bookauthorsrelation = book relation('authors'); 42 book authorsobjects = await bookauthorsrelation query() find(); 43 } 44 setqueriedbooks(books); 45 return true; 46 } catch (error) { 47 // error can be caused by lack of internet connection 48 alert(`error! ${error message}`); 49 return false; 50 } 51 }; 일대다 쿼리 특정 출판사나 장르와 관련된 책을 쿼리하려면 \parse query equalt\ 메서드를 호출하고 \parse object\ 인스턴스를 매개변수로 전달해야 합니다 쿼리 후, parse는 결과 객체 내부에 일대다 관계 필드의 완전한 인스턴스를 저장합니다 이러한 객체 인스턴스에서 데이터를 검색하고 표시하려면 다음과 같이 \parse object get\ 메서드를 체이닝할 수 있습니다 \bookparseobject get(('publisher') get('name') \ 다대다 쿼리 특정 저자와 관련된 책을 쿼리하기 위해서는 쿼리가 \parse query equalto\ 메서드만 사용합니다 그러나 쿼리 후, parse는 \parse object\ 인스턴스를 다대다 관계 필드에서 저장하지 않고, 관련 클래스 이름에 대한 참조만 저장합니다 예를 들어 \{" type" "relation", "classname" "author"}\ 이러한 객체 인스턴스에서 데이터를 검색하고 표시하려면 관계를 생성하고 다시 쿼리하여 결과를 자신의 객체 배열에 저장해야 합니다 일대일 쿼리 이전과 마찬가지로 특정 isbd와 관련된 책을 쿼리하려면 \parse query equalto\ 메서드를 사용하여 \parse object\ 인스턴스를 매개변수로 전달해야 합니다 쿼리 후, parse는 결과 객체 내에 일대일 관계 필드의 전체 인스턴스를 저장하며, 이는 일대다 관계 필드와 동일한 방식으로 수행됩니다 결론 이 가이드의 끝에서, 여러분은 react에서 parse의 관계를 생성하고 쿼리하는 방법을 배웠습니다 다음 가이드에서는 사용자 등록 방법을 보여드리겠습니다