Basic Operations

11 분

리액트 네이티브 crud 튜토리얼 소개 parse에 데이터를 저장하는 것은 \parse object\ 클래스에 기반합니다 각 \parse object\ 는 json 호환 데이터의 키 값 쌍을 포함합니다 이 데이터는 스키마가 없으므로 각 \parse object\ 에 어떤 키가 존재하는지 미리 지정할 필요가 없습니다 원하는 키 값 쌍을 설정하면, 우리의 백엔드가 이를 저장합니다 또한 애플리케이션의 필요에 따라 데이터 유형을 지정하고 \숫자\ , \부울\ , \문자열\ , \날짜 및 시간\ , \목록\ , \geopointers\ , 그리고 \객체\ , 저장하기 전에 json으로 인코딩합니다 parse는 또한 \포인터\ 및 \관계\ 와 같은 유형을 사용하여 관계형 데이터를 저장하고 쿼리하는 것을 지원합니다 이 가이드에서는 crud 예제 앱을 통해 기본 데이터 작업을 수행하는 방법을 배우게 되며, 이를 통해 react native에서 parse 서버 데이터베이스에서 데이터를 생성, 읽기, 업데이트 및 삭제하는 방법을 보여줍니다 먼저 각 crud 작업에 대한 구성 요소 함수를 생성하고, 나중에 전체 화면 레이아웃에서 이를 사용하여 할 일 목록 앱을 만들 것입니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app에 연결된 react native 앱을 생성해야 합니다 이 가이드에서 제공하는 화면 레이아웃을 테스트/사용하려면 \react native paper\ 를 설정해야 합니다 라이브러리 https //github com/callstack/react native paper 목표 parse를 사용하여 react native에서 기본 crud 애플리케이션을 구축하는 것입니다 1 데이터 객체 생성하기 parse 데이터베이스에서 데이터를 관리하는 첫 번째 단계는 데이터가 있는 것입니다 이제 \createtodo\ 함수를 만들어 보겠습니다 이 함수는 “todo” 서브클래스를 가진 새로운 \parse object\ 의 인스턴스를 생성합니다 todo는 작업을 설명하는 제목( \string\ )과 작업이 완료되었는지를 나타내는 done( \boolean\ ) 필드를 가집니다 javascript 1 const createtodo = async function () { 2 // this value comes from a state variable 3 const newtodotitlevalue = newtodotitle; 4 // creates a new todo parse object instance 5 let todo = new parse object('todo'); 6 todo set('title', newtodotitlevalue); 7 todo set('done', false); 8 // after setting the todo values, save it on the server 9 try { 10 await todo save(); 11 // success 12 alert alert('success!', 'todo created!'); 13 // refresh todos list to show the new one (you will create this function later) 14 readtodos(); 15 return true; 16 } catch (error) { 17 // error can be caused by lack of internet connection 18 alert alert('error!', error message); 19 return false; 20 }; 21 }; todolist tsx 1 const createtodo = async function () promise\<boolean> { 2 // this value comes from a state variable 3 const newtodotitlevalue string = newtodotitle; 4 // creates a new todo parse object instance 5 let todo parse object = new parse object('todo'); 6 todo set('title', newtodotitlevalue); 7 todo set('done', false); 8 // after setting the todo values, save it on the server 9 try { 10 await todo save(); 11 // success 12 alert alert('success!', 'todo created!'); 13 // refresh todos list to show the new one (you will create this function later) 14 readtodos(); 15 return true; 16 } catch (error) { 17 // error can be caused by lack of internet connection 18 alert alert('error!', error message); 19 return false; 20 }; 21 }; 데이터베이스에 \todo\ 테이블(또는 서브클래스)이 아직 없다면, parse는 이를 자동으로 생성하고 \parse object\ 인스턴스 내에서 설정된 모든 열을 추가합니다 이는 \parse object set()\ 메서드를 사용하여 수행되며, 이 메서드는 두 개의 인수를 받습니다 필드 이름과 설정할 값입니다 2 데이터 객체 읽기 데이터베이스에 데이터를 생성한 후, 이제 애플리케이션은 서버에서 이를 읽고 사용자에게 보여줄 수 있습니다 계속해서 \readtodos\ 함수를 생성하세요 이 함수는 \parse query\ , 결과를 상태 변수에 저장합니다 javascript 1 const readtodos = async function () { 2 // reading parse objects is done by using parse query 3 const parsequery = new parse query('todo'); 4 try { 5 let todos = await parsequery find(); 6 // be aware that empty or invalid queries return as an empty array 7 // set results to state variable 8 setreadresults(todos); 9 return true; 10 } catch (error) { 11 // error can be caused by lack of internet connection 12 alert alert('error!', error message); 13 return false; 14 }; 15 };1 const readtodos = async function () promise\<boolean> { 2 // reading parse objects is done by using parse query 3 const parsequery parse query = new parse query('todo'); 4 try { 5 let todos parse object\[] = await parsequery find(); 6 // be aware that empty or invalid queries return as an empty array 7 // set results to state variable 8 setreadresults(todos); 9 return true; 10 } catch (error) { 11 // error can be caused by lack of internet connection 12 alert alert('error!', error message); 13 return false; 14 }; 15 }; \parse query\ 클래스는 매우 강력하며, 많은 제약 조건과 정렬을 쿼리에 적용할 수 있습니다 지금은 모든 저장된 \todo\ 객체를 검색하는 이 간단한 쿼리에 집중하겠습니다 3 데이터 객체 업데이트 \parse object\ 인스턴스를 업데이트하는 것은 새 인스턴스를 생성하는 것과 매우 유사합니다 단, 이 경우에는 이전에 생성된 \objectid\ 를 할당한 후 새 값을 설정하고 저장해야 합니다 javascript 1 const updatetodo = async function (todoid, done) { 2 // create a new todo parse object instance and set todo id 3 let todo = new parse object('todo'); 4 todo set('objectid', todoid); 5 // set new done value and save parse object changes 6 todo set('done', done); 7 try { 8 await todo save(); 9 // success 10 alert alert('success!', 'todo updated!'); 11 // refresh todos list 12 readtodos(); 13 return true; 14 } catch (error) { 15 // error can be caused by lack of internet connection 16 alert alert('error!', error message); 17 return false; 18 }; 19 };1 const updatetodo = async function ( 2 todoid string, 3 done boolean, 4 ) promise\<boolean> { 5 // create a new todo parse object instance and set todo id 6 let todo parse object = new parse object('todo'); 7 todo set('objectid', todoid); 8 // set new done value and save parse object changes 9 todo set('done', done); 10 try { 11 await todo save(); 12 // success 13 alert alert('success!', 'todo updated!'); 14 // refresh todos list 15 readtodos(); 16 return true; 17 } catch (error) { 18 // error can be caused by lack of internet connection 19 alert alert('error!', error message); 20 return false; 21 }; 22 }; 이 예제 앱은 할 일 목록을 나타내므로, 업데이트 함수는 추가 인수인 \done\ 값을 받아들이며, 이는 특정 작업이 완료되었는지 여부를 나타냅니다 4 데이터 객체 삭제 데이터 객체를 삭제하려면 \ destroy()\ 메서드를 호출해야 합니다 \parse object\ 인스턴스를 나타냅니다 이 작업은 되돌릴 수 없으므로 주의하십시오 javascript 1 const deletetodo = async function (todoid) { 2 // create a new todo parse object instance and set todo id 3 const todo = new parse object('todo'); 4 todo set('objectid', todoid); 5 // destroy should be called to delete a parse object 6 try { 7 await todo destroy(); 8 alert alert('success!', 'todo deleted!'); 9 // refresh todos list to remove this one 10 readtodos(); 11 return true; 12 } catch (error) { 13 // error can be caused by lack of internet connection 14 alert alert('error!', error message); 15 return false; 16 }; 17 };1 const deletetodo = async function (todoid string) promise\<boolean> { 2 // create a new todo parse object instance and set todo id 3 let todo parse object = new parse object('todo'); 4 todo set('objectid', todoid); 5 // destroy should be called to delete a parse object 6 try { 7 await todo destroy(); 8 alert alert('success!', 'todo deleted!'); 9 // refresh todos list to remove this one 10 readtodos(); 11 return true; 12 } catch (error) { 13 // error can be caused by lack of internet connection 14 alert alert('error!', error message); 15 return false; 16 }; 17 }; 이제 이 네 가지 함수를 완전한 컴포넌트에서 사용해 보겠습니다 이를 통해 모든 crud 작업이 제대로 작동하는지 테스트할 수 있습니다 5 react native 컴포넌트에서 crud 사용하기 다음은 스타일이 적용된 사용자 인터페이스 요소, 상태 변수 및 crud 함수 호출을 포함한 완전한 컴포넌트 코드입니다 다음 코드를 포함하는 \todolist js/todolist tsx\ 라는 파일에 별도의 컴포넌트를 만들거나, 주 애플리케이션 파일( \app js/app tsx\ 또는 \index js\ )에 추가할 수 있습니다 todolist js 1 import react, {usestate} from 'react'; 2 import { 3 alert, 4 view, 5 safeareaview, 6 image, 7 scrollview, 8 statusbar, 9 stylesheet, 10 touchableopacity, 11 } from 'react native'; 12 import parse from 'parse/react native'; 13 import { 14 list, 15 title, 16 iconbutton, 17 text as papertext, 18 button as paperbutton, 19 textinput as papertextinput, 20 } from 'react native paper'; 21	 22 export const todolist = () => { 23 // state variables 24 const \[readresults, setreadresults] = usestate(\[]); 25 const \[newtodotitle, setnewtodotitle] = usestate(''); 26	 27 // functions used by the screen components 28 const createtodo = async function () { 29 // this value comes from a state variable 30 const newtodotitlevalue = newtodotitle; 31 // creates a new todo parse object instance 32 let todo = new parse object('todo'); 33 todo set('title', newtodotitlevalue); 34 todo set('done', false); 35 // after setting the todo values, save it on the server 36 try { 37 await todo save(); 38 // success 39 alert alert('success!', 'todo created!'); 40 // refresh todos list to show the new one (you will create this function later) 41 readtodos(); 42 return true; 43 } catch (error) { 44 // error can be caused by lack of internet connection 45 alert alert('error!', error message); 46 return false; 47 } 48 }; 49	 50 const readtodos = async function () { 51 // reading parse objects is done by using parse query 52 const parsequery = new parse query('todo'); 53 try { 54 let todos = await parsequery find(); 55 // be aware that empty or invalid queries return as an empty array 56 // set results to state variable 57 setreadresults(todos); 58 return true; 59 } catch (error) { 60 // error can be caused by lack of internet connection 61 alert alert('error!', error message); 62 return false; 63 } 64 }; 65	 66 const updatetodo = async function (todoid, done) { 67 // create a new todo parse object instance and set todo id 68 let todo = new parse object('todo'); 69 todo set('objectid', todoid); 70 // set new done value and save parse object changes 71 todo set('done', done); 72 try { 73 await todo save(); 74 // success 75 alert alert('success!', 'todo updated!'); 76 // refresh todos list 77 readtodos(); 78 return true; 79 } catch (error) { 80 // error can be caused by lack of internet connection 81 alert alert('error!', error message); 82 return false; 83 }; 84 }; 85	 86 const deletetodo = async function (todoid) { 87 // create a new todo parse object instance and set todo id 88 let todo = new parse object('todo'); 89 todo set('objectid', todoid); 90 // destroy should be called to delete a parse object 91 try { 92 await todo destroy(); 93 alert alert('success!', 'todo deleted!'); 94 // refresh todos list to remove this one 95 readtodos(); 96 return true; 97 } catch (error) { 98 // error can be caused by lack of internet connection 99 alert alert('error!', error message); 100 return false; 101 } 102 }; 103	 104 return ( 105 <> 106 \<statusbar backgroundcolor="#208aec" /> 107 \<safeareaview style={styles container}> 108 \<view style={styles header}> 109 \<image 110 style={styles header logo} 111 source={ { 112 uri 113 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', 114 } } 115 /> 116 \<papertext style={styles header text bold}> 117 {'react native on back4app'} 118 \</papertext> 119 \<papertext style={styles header text}>{'product creation'}\</papertext> 120 \</view> 121 \<view style={styles wrapper}> 122 \<view style={styles flex between}> 123 \<title>todo list\</title> 124 {/ todo read (refresh) button /} 125 \<iconbutton 126 icon="refresh" 127 color={'#208aec'} 128 size={24} 129 onpress={() => readtodos()} 130 /> 131 \</view> 132 \<view style={styles create todo container}> 133 {/ todo create text input /} 134 \<papertextinput 135 value={newtodotitle} 136 onchangetext={text => setnewtodotitle(text)} 137 label="new todo" 138 mode="outlined" 139 style={styles create todo input} 140 /> 141 {/ todo create button /} 142 \<paperbutton 143 onpress={() => createtodo()} 144 mode="contained" 145 icon="plus" 146 color={'#208aec'} 147 style={styles create todo button}> 148 {'add'} 149 \</paperbutton> 150 \</view> 151 \<scrollview> 152 {/ todo read results list /} 153 {readresults !== null && 154 readresults !== undefined && 155 readresults map((todo) => ( 156 \<list item 157 key={todo id} 158 title={todo get('title')} 159 titlestyle={ 160 todo get('done') === true 161 ? styles todo text done 162 styles todo text 163 } 164 style={styles todo item} 165 right={props => ( 166 <> 167 {/ todo update button /} 168 {todo get('done') !== true && ( 169 \<touchableopacity 170 onpress={() => updatetodo(todo id, true)}> 171 \<list icon 172 { props} 173 icon="check" 174 color={'#4caf50'} 175 /> 176 \</touchableopacity> 177 )} 178 {/ todo delete button /} 179 \<touchableopacity onpress={() => deletetodo(todo id)}> 180 \<list icon { props} icon="close" color={'#ef5350'} /> 181 \</touchableopacity> 182 \</> 183 )} 184 /> 185 ))} 186 \</scrollview> 187 \</view> 188 \</safeareaview> 189 \</> 190 ); 191 }; 192	 193 // these define the screen component styles 194 const styles = stylesheet create({ 195 container { 196 flex 1, 197 backgroundcolor '#fff', 198 }, 199 wrapper { 200 width '90%', 201 alignself 'center', 202 }, 203 header { 204 alignitems 'center', 205 paddingtop 10, 206 paddingbottom 20, 207 backgroundcolor '#208aec', 208 }, 209 header logo { 210 width 170, 211 height 40, 212 marginbottom 10, 213 resizemode 'contain', 214 }, 215 header text bold { 216 color '#fff', 217 fontsize 14, 218 fontweight 'bold', 219 }, 220 header text { 221 margintop 3, 222 color '#fff', 223 fontsize 14, 224 }, 225 flex between { 226 flexdirection 'row', 227 alignitems 'center', 228 justifycontent 'space between', 229 }, 230 create todo container { 231 flexdirection 'row', 232 }, 233 create todo input { 234 flex 1, 235 height 38, 236 marginbottom 16, 237 backgroundcolor '#fff', 238 fontsize 14, 239 }, 240 create todo button { 241 margintop 6, 242 marginleft 15, 243 height 40, 244 }, 245 todo item { 246 borderbottomwidth 1, 247 borderbottomcolor 'rgba(0, 0, 0, 0 12)', 248 }, 249 todo text { 250 fontsize 15, 251 }, 252 todo text done { 253 color 'rgba(0, 0, 0, 0 3)', 254 fontsize 15, 255 textdecorationline 'line through', 256 }, 257 }) todolist tsx 1 import react, {fc, reactelement, usestate} from 'react'; 2 import { 3 alert, 4 view, 5 safeareaview, 6 image, 7 scrollview, 8 statusbar, 9 stylesheet, 10 touchableopacity, 11 } from 'react native'; 12 import parse from 'parse/react native'; 13 import { 14 list, 15 title, 16 iconbutton, 17 text as papertext, 18 button as paperbutton, 19 textinput as papertextinput, 20 } from 'react native paper'; 21	 22 export const todolist fc<{}> = ({}) reactelement => { 23 // state variables 24 const \[readresults, setreadresults] = usestate<\[parse object]>(); 25 const \[newtodotitle, setnewtodotitle] = usestate(''); 26	 27 // functions used by the screen components 28 const createtodo = async function () promise\<boolean> { 29 // this value comes from a state variable 30 const newtodotitlevalue string = newtodotitle; 31 // creates a new todo parse object instance 32 let todo parse object = new parse object('todo'); 33 todo set('title', newtodotitlevalue); 34 todo set('done', false); 35 // after setting the todo values, save it on the server 36 try { 37 await todo save(); 38 // success 39 alert alert('success!', 'todo created!'); 40 // refresh todos list to show the new one (you will create this function later) 41 readtodos(); 42 return true; 43 } catch (error) { 44 // error can be caused by lack of internet connection 45 alert alert('error!', error message); 46 return false; 47 } 48 }; 49	 50 const readtodos = async function () promise\<boolean> { 51 // reading parse objects is done by using parse query 52 const parsequery parse query = new parse query('todo'); 53 try { 54 let todos parse object\[] = await parsequery find(); 55 // be aware that empty or invalid queries return as an empty array 56 // set results to state variable 57 setreadresults(todos); 58 return true; 59 } catch (error) { 60 // error can be caused by lack of internet connection 61 alert alert('error!', error message); 62 return false; 63 } 64 }; 65	 66 const updatetodo = async function ( 67 todoid string, 68 done boolean, 69 ) promise\<boolean> { 70 // create a new todo parse object instance and set todo id 71 let todo parse object = new parse object('todo'); 72 todo set('objectid', todoid); 73 // set new done value and save parse object changes 74 todo set('done', done); 75 try { 76 await todo save(); 77 // success 78 alert alert('success!', 'todo updated!'); 79 // refresh todos list 80 readtodos(); 81 return true; 82 } catch (error) { 83 // error can be caused by lack of internet connection 84 alert alert('error!', error message); 85 return false; 86 } 87 }; 88	 89 const deletetodo = async function (todoid string) promise\<boolean> { 90 // create a new todo parse object instance and set todo id 91 let todo parse object = new parse object('todo'); 92 todo set('objectid', todoid); 93 // destroy should be called to delete a parse object 94 try { 95 await todo destroy(); 96 alert alert('success!', 'todo deleted!'); 97 // refresh todos list to remove this one 98 readtodos(); 99 return true; 100 } catch (error) { 101 // error can be caused by lack of internet connection 102 alert alert('error!', error message); 103 return false; 104 } 105 }; 106	 107 return ( 108 <> 109 \<statusbar backgroundcolor="#208aec" /> 110 \<safeareaview style={styles container}> 111 \<view style={styles header}> 112 \<image 113 style={styles header logo} 114 source={ { 115 uri 116 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', 117 } } 118 /> 119 \<papertext style={styles header text bold}> 120 {'react native on back4app'} 121 \</papertext> 122 \<papertext style={styles header text}>{'product creation'}\</papertext> 123 \</view> 124 \<view style={styles wrapper}> 125 \<view style={styles flex between}> 126 \<title>todo list\</title> 127 {/ todo read (refresh) button /} 128 \<iconbutton 129 icon="refresh" 130 color={'#208aec'} 131 size={24} 132 onpress={() => readtodos()} 133 /> 134 \</view> 135 \<view style={styles create todo container}> 136 {/ todo create text input /} 137 \<papertextinput 138 value={newtodotitle} 139 onchangetext={text => setnewtodotitle(text)} 140 label="new todo" 141 mode="outlined" 142 style={styles create todo input} 143 /> 144 {/ todo create button /} 145 \<paperbutton 146 onpress={() => createtodo()} 147 mode="contained" 148 icon="plus" 149 color={'#208aec'} 150 style={styles create todo button}> 151 {'add'} 152 \</paperbutton> 153 \</view> 154 \<scrollview> 155 {/ todo read results list /} 156 {readresults !== null && 157 readresults !== undefined && 158 readresults map((todo parse object) => ( 159 \<list item 160 key={todo id} 161 title={todo get('title')} 162 titlestyle={ 163 todo get('done') === true 164 ? styles todo text done 165 styles todo text 166 } 167 style={styles todo item} 168 right={props => ( 169 <> 170 {/ todo update button /} 171 {todo get('done') !== true && ( 172 \<touchableopacity 173 onpress={() => updatetodo(todo id, true)}> 174 \<list icon 175 { props} 176 icon="check" 177 color={'#4caf50'} 178 /> 179 \</touchableopacity> 180 )} 181 {/ todo delete button /} 182 \<touchableopacity onpress={() => deletetodo(todo id)}> 183 \<list icon { props} icon="close" color={'#ef5350'} /> 184 \</touchableopacity> 185 \</> 186 )} 187 /> 188 ))} 189 \</scrollview> 190 \</view> 191 \</safeareaview> 192 \</> 193 ); 194 }; 195	 196 // these define the screen component styles 197 const styles = stylesheet create({ 198 container { 199 flex 1, 200 backgroundcolor '#fff', 201 }, 202 wrapper { 203 width '90%', 204 alignself 'center', 205 }, 206 header { 207 alignitems 'center', 208 paddingtop 10, 209 paddingbottom 20, 210 backgroundcolor '#208aec', 211 }, 212 header logo { 213 width 170, 214 height 40, 215 marginbottom 10, 216 resizemode 'contain', 217 }, 218 header text bold { 219 color '#fff', 220 fontsize 14, 221 fontweight 'bold', 222 }, 223 header text { 224 margintop 3, 225 color '#fff', 226 fontsize 14, 227 }, 228 flex between { 229 flexdirection 'row', 230 alignitems 'center', 231 justifycontent 'space between', 232 }, 233 create todo container { 234 flexdirection 'row', 235 }, 236 create todo input { 237 flex 1, 238 height 38, 239 marginbottom 16, 240 backgroundcolor '#fff', 241 fontsize 14, 242 }, 243 create todo button { 244 margintop 6, 245 marginleft 15, 246 height 40, 247 }, 248 todo item { 249 borderbottomwidth 1, 250 borderbottomcolor 'rgba(0, 0, 0, 0 12)', 251 }, 252 todo text { 253 fontsize 15, 254 }, 255 todo text done { 256 color 'rgba(0, 0, 0, 0 3)', 257 fontsize 15, 258 textdecorationline 'line through', 구성이 제대로 되어 있다면, 앱을 빌드하고 실행한 후에 다음과 같은 화면을 볼 수 있어야 합니다 할 일 목록에 추가하려면 입력 상자에 제목을 하나씩 입력하고 \추가\ 버튼을 눌러주세요 성공적으로 생성된 후에는 \createtodo\ 함수가 \readtodos\ 함수를 트리거하여 작업 목록이 자동으로 새로 고쳐집니다 이제 다음과 같은 상당한 할 일 목록이 있어야 합니다 이제 체크마크를 클릭하여 작업을 완료로 표시할 수 있으며, 이로 인해 \완료 \ 값이 true로 업데이트되고 왼쪽의 아이콘 상태가 변경됩니다 이제 남은 데이터 작업은 삭제 작업으로, 할 일 목록 객체의 가장 오른쪽에 있는 쓰레기통 아이콘을 눌러 수행할 수 있습니다 객체를 성공적으로 삭제한 후에는 다음과 같은 경고 메시지가 표시됩니다 결론 이 가이드를 마치면서, react native에서 parse의 기본 데이터 작업(crud)을 수행하는 방법을 배웠습니다 다음 가이드에서는 parse에서 지원하는 데이터 유형과 이를 사용하는 방법을 보여드리겠습니다