React Native에서 Parse로 사용자 쿼리 구현하는 방법

리액트 네이티브에서 parse로 사용자 쿼리하기 소개 일부 리액트 네이티브 앱은 애플리케이션 사용자를 직접 관리해야 하거나 적어도 특정 하위 집합을 나열할 수 있어야 합니다 parse는 강력한 쿼리 도구를 제공하며, 예를 들어 소셜 미디어 앱의 사용자에 대해서도 사용할 수 있습니다 이 가이드에서는 parse query parse query 를 사용하여 parse js sdk를 이용한 리액트 네이티브 앱에서 현실적인 사용자 쿼리를 수행하는 방법을 배웁니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 생성된 리액트 네이티브 앱과 back4app에 연결된 목표 리액트 네이티브 앱을 위한 사용자 쿼리 기능을 parse를 사용하여 구축하는 것입니다 1 parse query 클래스 이해하기 모든 parse 쿼리 작업은 parse query parse query 객체 유형을 사용하며, 이는 앱 전반에 걸쳐 데이터베이스에서 특정 데이터를 검색하는 데 도움이 됩니다 parse query parse query 는 검색 메서드(예 parse query find parse query find 또는 parse query get parse query get 호출 후에만 해결된다는 것을 아는 것이 중요합니다 따라서 쿼리를 설정하고 실제로 호출되기 전에 여러 수정자를 연결할 수 있습니다 새로운 parse query parse query , 생성하려면 원하는 parse object parse object 서브클래스를 매개변수로 전달해야 하며, 이는 쿼리 결과를 포함할 것입니다 이 가이드 사용 사례의 예( parse user parse user )는 아래에서 볼 수 있습니다 javascript 1 // this will create your query 2 const parsequery = new parse query(parse user); 3 // the query will resolve only after calling this method 5 const queryresult = await parsequery find();1 // this will create your query 2 const parsequery parse query = new parse query(parse user); 3 // the query will resolve only after calling this method 4 const queryresult \[parse user] = await parsequery find(); 다음에서 parse query parse query 클래스에 대해 더 읽을 수 있습니다 공식 문서에서 여기 https //parseplatform org/parse sdk js/api/master/parse query html 2 관련 사용자 쿼리 수행하기 이제 앱에서 사용자를 관리하거나 표시할 때 수행해야 할 몇 가지 관련 쿼리를 살펴보겠습니다 우선, 검색 값이 포함된 사용자 이름을 검색하는 텍스트 검색 쿼리를 수행해 보겠습니다 javascript 1 const douserquery = async function () { 2 // this value comes from a state variable 3 const usernamesearchvalue = usernamesearch; 4 // this will create your user query 5 const parsequery = new parse query(parse user); 6 // several query functions can be set to your parse,query, they will 7 // only resolve when calling "find", for example 8 if (usernamesearchvalue !== '') { 9 // "contains" will retrieve users whose username contain the searched value, case sensitive 10 parsequery contains('username', usernamesearchvalue); 11 // 12 // or 13 // 14 // for case insensitive string search, use "matches", that will take into account 15 // an regexp for matching, in this case use only "i", which is the regexp modifier 16 // for case insensitive 17 parsequery matches('username', usernamesearchvalue, 'i'); 18 } 19 // only after calling "find" all query conditions will resolve 20 return await parsequery 21 find() 22 then(async (queriedusers => { 23 // set the query results to an state variable to retrieve it on your jsx 24 // be aware that empty or invalid queries return as an empty array 25 setqueryresults(queriedusers); 26 return true; 27 }) 28 catch((error) => { 29 // error can be caused by lack of internet connection, but in most 30 // cases "find" will return as an empty array on "then" 31 alert alert('error!', error message); 32 setqueryresults(\[]); 33 return false; 34 }); 35 };1 const douserquery = async function () promise\<boolean> { 2 // this value comes from a state variable 3 const usernamesearchvalue string = usernamesearch; 4 // this will create your user query 5 const parsequery parse query = new parse query(parse user); 6 // several query functions can be set to your parse,query, they will 7 // only resolve when calling "find", for example 8 if (usernamesearchvalue !== '') { 9 // "contains" will retrieve users whose username contain the searched value, case sensitive 10 parsequery contains('username', usernamesearchvalue); 11 // 12 // or 13 // 14 // for case insensitive string search, use "matches", that will take into account 15 // an regexp for matching, in this case use only "i", which is the regexp modifier 16 // for case insensitive 17 parsequery matches('username', usernamesearchvalue, 'i'); 18 } 19 // only after calling "find" all query conditions will resolve 20 return await parsequery 21 find() 22 then(async (queriedusers \[parse user]) => { 23 // set the query results to an state variable to retrieve it on your jsx 24 // be aware that empty or invalid queries return as an empty array 25 setqueryresults(queriedusers); 26 return true; 27 }) 28 catch((error object) => { 29 // error can be caused by lack of internet connection, but in most 30 // cases "find" will return as an empty array on "then" 31 alert alert('error!', error message); 32 setqueryresults(\[]); 33 return false; 34 }); 35 }; 문자열을 검색하는 방법은 최소한 두 가지가 있으며, 각각은 특정한 응용 프로그램과 장점이 있습니다 대부분의 경우, 대소문자를 구분하지 않는 결과를 보장하고 코드에서 예기치 않은 동작을 피하기 위해 parse query matches parse query matches 를 사용하고 싶을 것입니다 이 쿼리를 수행한 후, 앱의 사용자 목록은 다음과 같은 내용을 보여야 합니다 문자열 쿼리 외에도, 부울 필드와 마찬가지로 정확한 값을 포함하는 객체를 검색하고 싶을 때 “정확한” 쿼리를 수행할 수 있습니다 다음 예제는 emailverified emailverified 필드를 통해 이메일로 확인된 사용자를 검색하는 방법을 보여줍니다 javascript 1 const douserquery = async function () { 2 // this value comes from a state variable 3 const showonlyverifiedvalue boolean = showonlyverified; 4 // this will create your user query 5 const parsequery = new parse query(parse user); 6 // several query functions can be set to your parse,query, they will 7 // only resolve when calling "find", for example 8 if (showonlyverifiedvalue === true) { 9 // "equalto" will retrieve users whose "emailverified" value is exactly "true" 10 parsequery equalto('emailverified', true); 11 } 12 // only after calling "find" all query conditions will resolve 13 return await parsequery 14 find() 15 then(async (queriedusers) => { 16 // set the query results to an state variable to retrieve it on your jsx 17 // be aware that empty or invalid queries return as an empty array 18 setqueryresults(queriedusers); 19 return true; 20 }) 21 catch((error) => { 22 // error can be caused by lack of internet connection, but in most 23 // cases "find" will return as an empty array on "then" 24 alert alert('error!', error message); 25 setqueryresults(\[]); 26 return false; 27 }); 28 };1 const douserquery = async function () promise\<boolean> { 2 // this value comes from a state variable 3 const showonlyverifiedvalue boolean = showonlyverified; 4 // this will create your user query 5 const parsequery parse query = new parse query(parse user); 6 // several query functions can be set to your parse,query, they will 7 // only resolve when calling "find", for example 8 if (showonlyverifiedvalue === true) { 9 // "equalto" will retrieve users whose "emailverified" value is exactly "true" 10 parsequery equalto('emailverified', true); 11 } 12 // only after calling "find" all query conditions will resolve 13 return await parsequery 14 find() 15 then(async (queriedusers \[parse user]) => { 16 // set the query results to an state variable to retrieve it on your jsx 17 // be aware that empty or invalid queries return as an empty array 18 setqueryresults(queriedusers); 19 return true; 20 }) 21 catch((error object) => { 22 // error can be caused by lack of internet connection, but in most 23 // cases "find" will return as an empty array on "then" 24 alert alert('error!', error message); 25 setqueryresults(\[]); 26 return false; 27 }); 28 }; 이제 귀하의 앱은 사용자 목록을 다음과 같이 업데이트해야 합니다 또 다른 일반적인 예는 쿼리에 정렬을 적용하는 것입니다 이는 두 가지 방법으로 수행할 수 있습니다 하나는 parse query ascending/parse query descending parse query ascending/parse query descending 또는 parse query addascending/parse query adddescending parse query addascending/parse query adddescending 입니다 첫 번째 경우는 다른 모든 정렬을 무시하고 쿼리가 사용할 유일한 정렬이 되며, 후자는 기존 정렬과 연결되어 여러 개의 정렬을 가능하게 합니다 javascript 1 const douserquery = async function () { 2 // this value comes from a state variable 3 const orderbyvalue = orderby; 4 // this will create your user query 5 const parsequery = new parse query(parse user); 6 // several query functions can be set to your parse,query, they will 7 // only resolve when calling "find", for example 8 // for list ordering, you can use "addascending" or "adddescending", passing as parameter 9 // which object field should be the one to order by 10 // note that "usernameasc", "usernamedesc" and so on are made up string values applied to a filter in 11 // our example app, so change it by what is suitable to you 12 if (orderbyvalue === 'usernameasc') { 13 parsequery ascending('username'); 14 // 15 // or 16 // 17 parsequery addascending('username'); 18 } else if (orderbyvalue === 'usernamedesc') { 19 parsequery descending('username'); 20 // 21 // or 22 // 23 parsequery adddescending('username'); 24 } else if (orderbyvalue === 'dateasc') { 25 parsequery ascending('createdat'); 26 // 27 // or 28 // 29 parsequery addascending('createdat'); 30 } else if (orderbyvalue === 'datedesc') { 31 parsequery descending('createdat'); 32 // 33 // or 34 // 35 parsequery adddescending('createdat'); 36 } 37 // only after calling "find" all query conditions will resolve 38 return await parsequery 39 find() 40 then(async (queriedusers) => { 41 // set the query results to an state variable to retrieve it on your jsx 42 // be aware that empty or invalid queries return as an empty array 43 setqueryresults(queriedusers); 44 return true; 45 }) 46 catch((error) => { 47 // error can be caused by lack of internet connection, but in most 48 // cases "find" will return as an empty array on "then" 49 alert alert('error!', error message); 50 setqueryresults(\[]); 51 return false; 52 }); 53 };1 const douserquery = async function () promise\<boolean> { 2 // this value comes from a state variable 3 const orderbyvalue string = orderby; 4 // this will create your user query 5 const parsequery parse query = new parse query(parse user); 6 // several query functions can be set to your parse,query, they will 7 // only resolve when calling "find", for example 8 // for list ordering, you can use "addascending" or "adddescending", passing as parameter 9 // which object field should be the one to order by 10 // note that "usernameasc", "usernamedesc" and so on are made up string values applied to a filter in 11 // our example app, so change it by what is suitable to you 12 if (orderbyvalue === 'usernameasc') { 13 parsequery ascending('username'); 14 // 15 // or 16 // 17 parsequery addascending('username'); 18 } else if (orderbyvalue === 'usernamedesc') { 19 parsequery descending('username'); 20 // 21 // or 22 // 23 parsequery adddescending('username'); 24 } else if (orderbyvalue === 'dateasc') { 25 parsequery ascending('createdat'); 26 // 27 // or 28 // 29 parsequery addascending('createdat'); 30 } else if (orderbyvalue === 'datedesc') { 31 parsequery descending('createdat'); 32 // 33 // or 34 // 35 parsequery adddescending('createdat'); 36 } 37 // only after calling "find" all query conditions will resolve 38 return await parsequery 39 find() 40 then(async (queriedusers \[parse user]) => { 41 // set the query results to an state variable to retrieve it on your jsx 42 // be aware that empty or invalid queries return as an empty array 43 setqueryresults(queriedusers); 44 return true; 45 }) 46 catch((error object) => { 47 // error can be caused by lack of internet connection, but in most 48 // cases "find" will return as an empty array on "then" 49 alert alert('error!', error message); 50 setqueryresults(\[]); 51 return false; 52 }); 53 }; 이제 귀하의 앱은 쿼리를 다음과 같이 정렬해야 합니다 위에서 언급한 모든 쿼리 제약 조건은 연결하여 단일 쿼리에서 수행할 수 있으며, 이는 서로 함께 작동하는 다양한 필터 및 정렬을 생성하는 앱의 사용성을 향상시킵니다 다음은 이 가이드에서 사용된 모든 쿼리 메서드를 보여주는 전체 코드입니다 javascript 1 const douserquery = async function () { 2 // this value comes from a state variable 3 const usernamesearchvalue = usernamesearch; 4 const showonlyverifiedvalue = showonlyverified; 5 const orderbyvalue = orderby; 6 // this will create your user query 7 const parsequery = new parse query(parse user); 8 // several query functions can be set to your parse,query, they will 9 // only resolve when calling "find", for example 10 if (usernamesearchvalue !== '') { 11 // "contains" will retrieve users whose username contain the searched value, case sensitive 12 parsequery contains('username', usernamesearchvalue); 13 // 14 // or 15 // 16 // for case insensitive string search, use "matches", that will take into account 17 // an regexp for matching, in this case use only "i", which is the regexp modifier 18 // for case insensitive 19 parsequery matches('username', usernamesearchvalue, 'i'); 20 } 21 if (showonlyverifiedvalue === true) { 22 // "equalto" will retrieve users whose "emailverified" value is exactly "true" 23 parsequery equalto('emailverified', true); 24 } 25 // for list ordering, you can use "addascending" or "adddescending", passing as parameter 26 // which object field should be the one to order by 27 if (orderbyvalue === 'usernameasc') { 28 parsequery ascending('username'); 29 // 30 // or 31 // 32 parsequery addascending('username'); 33 } else if (orderbyvalue === 'usernamedesc') { 34 parsequery descending('username'); 35 // 36 // or 37 // 38 parsequery adddescending('username'); 39 } else if (orderbyvalue === 'dateasc') { 40 parsequery ascending('createdat'); 41 // 42 // or 43 // 44 parsequery addascending('createdat'); 45 } else if (orderbyvalue === 'datedesc') { 46 parsequery descending('createdat'); 47 // 48 // or 49 // 50 parsequery adddescending('createdat'); 51 } 52 // only after calling "find" all query conditions will resolve 53 return await parsequery 54 find() 55 then(async (queriedusers) => { 56 // set the query results to an state variable to retrieve it on your jsx 57 // be aware that empty or invalid queries return as an empty array 58 setqueryresults(queriedusers); 59 return true; 60 }) 61 catch((error) => { 62 // error can be caused by lack of internet connection, but in most 63 // cases "find" will return as an empty array on "then" 64 alert alert('error!', error message); 65 setqueryresults(\[]); 66 return false; 67 }); 68 };1 const douserquery = async function () promise\<boolean> { 2 // this value comes from a state variable 3 const usernamesearchvalue string = usernamesearch; 4 const showonlyverifiedvalue boolean = showonlyverified; 5 const orderbyvalue string = orderby; 6 // this will create your user query 7 const parsequery parse query = new parse query(parse user); 8 // several query functions can be set to your parse,query, they will 9 // only resolve when calling "find", for example 10 if (usernamesearchvalue !== '') { 11 // "contains" will retrieve users whose username contain the searched value, case sensitive 12 parsequery contains('username', usernamesearchvalue); 13 // 14 // or 15 // 16 // for case insensitive string search, use "matches", that will take into account 17 // an regexp for matching, in this case use only "i", which is the regexp modifier 18 // for case insensitive 19 parsequery matches('username', usernamesearchvalue, 'i'); 20 } 21 if (showonlyverifiedvalue === true) { 22 // "equalto" will retrieve users whose "emailverified" value is exactly "true" 23 parsequery equalto('emailverified', true); 24 } 25 // for list ordering, you can use "addascending" or "adddescending", passing as parameter 26 // which object field should be the one to order by 27 if (orderbyvalue === 'usernameasc') { 28 parsequery ascending('username'); 29 // 30 // or 31 // 32 parsequery addascending('username'); 33 } else if (orderbyvalue === 'usernamedesc') { 34 parsequery descending('username'); 35 // 36 // or 37 // 38 parsequery adddescending('username'); 39 } else if (orderbyvalue === 'dateasc') { 40 parsequery ascending('createdat'); 41 // 42 // or 43 // 44 parsequery addascending('createdat'); 45 } else if (orderbyvalue === 'datedesc') { 46 parsequery descending('createdat'); 47 // 48 // or 49 // 50 parsequery adddescending('createdat'); 51 } 52 // only after calling "find" all query conditions will resolve 53 return await parsequery 54 find() 55 then(async (queriedusers \[parse user]) => { 56 // set the query results to an state variable to retrieve it on your jsx 57 // be aware that empty or invalid queries return as an empty array 58 setqueryresults(queriedusers); 59 return true; 60 }) 61 catch((error object) => { 62 // error can be caused by lack of internet connection, but in most 63 // cases "find" will return as an empty array on "then" 64 alert alert('error!', error message); 65 setqueryresults(\[]); 66 return false; 67 }); 68 }; 결론 이 가이드의 끝에서, react native에서 parse 사용자에 대한 쿼리를 수행하는 방법을 배웠습니다 다음 가이드에서는 parse에서 데이터를 저장하고 읽는 방법을 보여드리겠습니다