home에 들어가자마자 데이터를 받아서 화면에 출력해주기 위한 작업,
해당 코드들을 useEffect 안에 입력한다고 생각하면 된다
또한 스냅샷을 사용하여 변화를 감지
// query : 문서를 요청하는 명령
const qu = query(
// dbService에 있는 "tweets"라는 collection을 가져와라.
collection(dbService, "document name"),
// 시간순으로 정렬해라.(createAt은 document들 내부에 선언되어있는 도큐먼트 요소)
// 생략가능
orderBy("createAt", "desc"),
);
- dbService = getFirestore()
onSnapShot 사용
// qu에 받아온 문서를
onSnapShot(qu, (snapshot) => {
// const 객체 = 문서 뭉치.문서뭉치 안에 있는 각 문서에 대해 실행
const arr = snapshot.docs.map((doc) => (
// 배열 내부의 모든 요소들을 이 형태로 저장
{
// doc의 Id
id : doc.id,
// doc에서 data() 실행해서 각 doc의 정보를 가져옴
...doc.data(),
}
));
// state에 배열을 집어넣는다
// 데이터는 setTweet((prev) => [document.data(), ...prev]) 와 같음
setTweets(tweetarr);