💎[Noitter]💎
4. CRUD(2) : Create/Read/Update/Delete
READ !

📖Read (열람/읽기)

• 내 포스팅 : 로그인 파일/컴포넌트 설계 및 구현 에서 로그인 성공한 유저가 글을 읽는 기능
• 내 포스팅 : CRUD(1) : Create/Read/Update/Delete CREATE ! 에서 작성한 글이 firebase에 저장되었는데, 그 글을 불러와 메인페이지에 출력(Read)해볼 것임
• 자신이 작성한 글과, 다른 유저가 작성한 글 모두 열람 가능하게 구현

📂Read 파일 구성

1. Router.js

: 로그인 성공 시 Home.js로 라우팅
: state - isLoggedIn → isLoggedIn ? <Home /> : <Auth /> 성공시 Home

2. fbase.js

: firebase의 firestore기능을 사용하기 위한 파일
: dbService = firebase.firestore();
→ dbService로 다른 파일에서 firebase의 firestore기능 호출 가능
: dbService.collection("noweets").onSnapshot((snapshot) => {...})
→ firestore의 collection의 "noweets"라는 저장소에서 글 불러오기 (Read)

3. Noweet.js

: 내 포스팅 : CRUD(1) : Create/Read/Update/Delete CREATE ! 에서 작성한 noweet을 담고있는 컴포넌트
: 읽기(Read)/수정(Update)/삭제(Delete)를 용이하게 하기 위해 컴포넌트 파일 분리했음

4. Home.js

: 로그인 성공 시 글 열람(Read)을 할 수 있는 페이지
: state - noweets(noweet을 Array로 관리) (.map을 이용해 출력할 것이기 때문)
: function
useEffect(로그인 후 작성된 글을 바로 불러와야 하니까 useEffect()훅 사용)
onSnapshot(firebase에 저장되어있는 데이터를 가져옴) (firease 내장함수)
.map (snapshot으로 데이터 가져올 때, noweets를 출력할 때 사용)

map 사용법 참고 👉🏻 내 포스팅 : [React] Map(data,i)

💻Source Code

Home 컴포넌트의 Create, Read 코드

❓ 동작원리 ❓
1. useEffect()를 이용하여 로그인 후 페이지가 mount 될 때마다,
2. firebase의 "noweets"라는 저장소에 저장된 자료를 onSnapshot()을 이용하여
3. noweetArray를 선언해, 자료의 id값과 data를 저장 후
4. setNoweets(noweetArray)를 이용해 저장된 값 noweets에 저장
→ 이제 firebase의 데이터를 코드 상으로 보여줄 수 있게 됨
5. return()에서 noweets.map(...)을 이용하여 Array에 저장된 값 전체 출력할껀데
6. <Noweet /> 컴포넌트에 전달하여 출력하자
※ noweet를 noweetObj이라는 변수로 전달했음을 유의

Noweet 컴포넌트 (별거없음)

return값에 Home에서 전달받은noweetObj.text를 출력 !

🤷🏻‍♀️ Read용 컴포넌트(Noweet)을 따로 분리한 이유?

사실 Read 기능만 생각하면 따로 분리할 필요가 없음

그러나 수정(Update)과 삭제(Delete) 기능도 추가할껀데,
수정과 삭제는 해당 글을 작성한 유저만이 권한을 얻을 수 있어야 하기때문에
해당 유저인지 확인하는 기능, [수정]을 클릭했을 때 글 수정을 위한 UI 구현 등을 생각해봤을때
컴포넌트를 다른 파일로 분리하는 것이 편리할 것이다.

앞으로 다룰 수정(Update)과 삭제(Delete) 기능은 <Noweet />컴포넌트에서 구현될 예정이다.

📚정리

1. firebase의 firestore에 저장된 글은 onSnapshot()을 이용하여 가져오면 편함
2. 쇼핑몰이든 블로그든 SNS든 몇 개일지 모를 데이터를 불러올 때는 Array를 사용하자
3. Array를 사용하면? .map()으로 가져와야 함 ❗
4. Read 이후 Update/Delete 기능도 구현할 것이라면 컴포넌트는 따로 분리하도록 하자

👍🏻노마드 코더 무료강의 참고

https://nomadcoders.co/nwitter/lobby