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);