Frontend 개발자 - hyo.loui
리액트 네이티브 - CRUD: Read API (useEffect와 onSnapshot 활용하기) 본문
❤️🔥TIL : Today I Learned
🎯목적 :
CRUD : Read API 추가, onSnapshot API 활용하기
1. Firestore 의 DB 가져오기
저번 포스팅에서 Creat API를 만들어
Firestore에 "todos" 라는 db를 넣을 수 있었다
이번에는 가져와서 보여줘야한다!
firebase API 활용하자!
선택지는 2가지다
- getDocs API
- onSnapshot API
getDocs로도 가져올 수 있겠지만
우리는 실시간으로 변동이 생기면 다시 데이터를 가져와야 하므로
state 처럼 사용해야 한다.
그래서 onSnapshot API 를 활용했다!
- import { onSnapshot } 으로 api를 가져온다
- useEffect를 사용하여 컴포넌트가 마운트시 곧장 Read API 를 사용할 수 있도록 만들어준다
- onSnapshot은 query를 가져와야 한다!
- 변수에 쿼리를 넣어주고, snapshot 파라미터로 새로운 todos 안에서 map으로 하나씩 돌며 얕은 복사를 하고, todo를 리턴한다
- 넣어준 newTodos를 setState하여 우리가 사용할 state값으로 전달해 준다!
2. 가져온 todos 확인하기
정확하게 잘 가져와주었다!
이제 이 데이터를 활용해서 todo를 하나씩 화면에 그려주자!
3. UI로 데이터 하나씩 보여주기
우리가 위에서 onSnapshot으로 가져온 데이터를
todos라는 스테이트에 넣어줬으니
todos를 활용해서 보여줄 차례다
todos를 만들때 처음 배열로 지정해 놓았으니
map 메서드를 사용해 하나씩 돌면서 반환할 수 있다
+ 참고로 map은 no mutation 이므로 우리가 직접 수정을 하거나 데이터를 변경하려고 해도
변화하지 않는게 기본 속성이다
Does it mutate?
The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.Array.prototype.lastIndexOf ( searchElement [ , fromIndex ] )
doesitmutate.xyz
4. 결과 화면
5. 카테고리 별 분류
위 부분에서 추가된 부분은
4번째 줄의 if 문이다!
로직은
- 버튼 클릭시 category state 변경! (현재 카테고리)
- 현재 카테고리 === todos가 가지고 있는 카테고리 변경
- 왜냐 newTodos를 넘겨 줄 때도 state인 category 값을 가지고 있기 때문에
최종 정리
- onSnapshot은 변동사항을 실시간 반영할 수 있는 firebase API 이며, 쿼리를 가져와야 한다
- 컴포넌트가 마운트 됨과 동시에 반영 될 수 있도록 useEffect를 활용하여 안에서 onSnapshot API로 작업했다
- 가져온 데이터를 확인하고 배열메서드인 map을 활용해 하나씩 돌면서 ui를 그려줬다
'React-Navtive' 카테고리의 다른 글
| 리액트 네이티브 - CRUD: Delete API (deleteDoc( ) 활용하기), CRUD 최종 완성 (0) | 2023.01.03 |
|---|---|
| 리액트 네이티브 - CRUD: Update API (updateDoc( ) 활용하기) (0) | 2023.01.03 |
| 리액트 네이티브 - 'Todo-List' 수정 버튼 클릭 시 이전값이 계속 나오는 오류 (0) | 2023.01.02 |
| 리액트 네이티브 - CRUD: Create API, Firebase 연결하기 (1) | 2023.01.02 |
| 리액트 네이티브 - Todo-List, setState 제대로 하기(해결) (0) | 2022.12.30 |
