CRUD with firebase: ✅ Read(읽기)-Getting the Tweets

트윗을 작성하여 db에 create 하는 것을 완료했으니 이제 파이어스토어db에서 작성한 트윗을 가져와 read! 읽어보자!

1. 세팅

1. firebase/firestore로 부터 query와 getDocs를 import 한다.

import {
  collection,
  addDoc,
  serverTimestamp,
  //가져오기
  query,
  getDocs,
} from "firebase/firestore";

2. Home 컴포넌트에 useState()를 사용하여 작성한 트윗을 가져오는 스테이트를 만든다.
   이때 기본 값은 빈 배열(array)로 설정하여 작성한 트윗 데이터들이 배열에 들어갈 수 있게 하자.

//🔥작성한 트윗 가져오기: 기본 값은 빈 배열
const [tweets, setTweets] = useState([]);

3. Home 컴포넌트가 마운트되면 useEffect(fn, []);를 사용하여 트윗 내용들을 가져오자.

• 그러기 위해 트윗 내용을 가져오는 함수 getTweets을 만들고 이 함수를 호출하자.
  • 이는 async를 사용하기 위해 개별 함수로 밖으로 빼서 만든 후, useEffect()에서 호출하기 위해서이다.

useEffect(() => {
  getTweets();
}, []);

용어 알고 넘어가기

• 마운트(mount)
  : 파일시스템 구조 내에 있는 일련의 파일들을 사용자나 사용자 그룹들이 이용할 수 있도록 만드는 것

2. 트윗 내용을 가져올 getTweets 함수의 내용을 채워보자.

여기서 사용할 firestore의 메서드

• getDocs()는 쿼리를 실행하고 결과를 QuerySnapshot으로 반환한다.
  • getDocs는 promise를 반환하기 때문에 async, await을 사용하자.
    
    
• QuerySnapshot 클래스
  • QuerySnapshot에는 쿼리 결과를 나타내는 0개 이상의 DocumentSnapshot 개체가 포함되어 있다.
  • 다큐먼트는, docs 속성을 통해 배열로 액세스하거나 / forEach 메서드를 사용하여 열거할 수 있다.
  • 문서의 수는 empty 및 size 속성을 통해 결정할 수 있다.

const getTweets = async () => {
  /*1. DB에서 컬렉션 가져오기
  dbService에 있는 tweets 컬렉션을 가져오는 쿼리 만들기*/
  const q = query(collection(dbService, "tweets"));
  
  /*2. 컬렉션의 다큐먼트 모두 가져오기
    - 쿼리를 실행하고 결과를 QuerySnapshot으로 반환하면 tweets 컬렉션의 document들을 얻는다.
    - 따라서 querySnapshot은 tweets 컬렉션의 document들을 모아놓은 배열이다.*/
  const querySnapshot = await getDocs(q);

  //3. 각각의 다큐먼트를 나열
  querySnapshot.forEach((document) => {
    /*각각의 다큐먼트를 나열할 때 {data, id} 오브젝트 형태로 나열하자.
    - document의 data를 가져오기 위해 data() 메서드 사용
    - 트윗 하나씩 나열 할 때 쓸 key 값 필요하기 때문에 id 할당*/
    const tweetObj = {
      ...document.data(),
      id: document.id,
    };
    //console.log(tweetObj);
    //- setTweets() 모디파이어로 이전 tweets(prev)에 대해, 새로운 배열(새로 작성한 트윗과, ...그 이전 것들)을 리턴해주자.
    setTweets((prev) => [tweetObj, ...prev]);
  });
};

1. 먼저 파이어스토어에서 사용할 컬렉션을 가져와야 한다.
   query()메서드를 사용하여, dbService에 있는 tweets 컬렉션에 대한 쿼리를 만들자.

2. 컬렉션을 가져왔으니 tweets 컬렉션의 document들을 가져오자.

   • 쿼리를 실행하고 결과를 QuerySnapshot으로 반환하는 getDocs()메서드를 사용하면 된다.
   • 이 메서드에 방금 만든 쿼리(q)를 보내고, 이 값을 querySnapshot변수로 할당하자.
   • getDocs()을 호출할 때는 await을 사용하여 동기처리 해주자.

3. 모든 다큐먼트를 가진 배열인 querySnapshot에서 각각의 다큐먼트를 나열하기 위해서는 forEach를 사용하면 된다.
   각각의 다큐먼트를 가져올 때 다음과 같은 오브젝트 형태로 나열되게 하자.

• {다큐먼트의 data, id}
  • 각각의 다큐먼트의 data는 data() 메서드를 사용하여 가져오면 된다.
  • 다큐먼트에 id를 할당하자.
    • 그냥 data만 가져올거면 오브젝트 형태로 만들지 않아도 된다. 그런데 디비에서 받아온 다큐먼트인 트윗 내용을 태그로 작성해서 나열할 때, 트윗 내용 각각에 key값을 할당해야 하기 때문에 id를 할당해 줬다. 따라서 오브젝트 형태로 작성하게 되었단 소리.
    • 결론적으로 forEach 써서 모든 다큐먼트를 나열하면 이런 모양새다. console.log(tweetObj);를 해보면 컬렉션에 들어 있는 다큐먼트들이 각각의 오브젝트로 출력되는 것을 확인할 수 있다. (트윗 내용은 쓰루합시당..^^~)
      
  • 그러고 나서 setTweets() 모디파이어로 state를 업데이트 해주자. 그래야 방금 쓴 트윗도 tweets state에 들어간다.
    • 이 때, 함수를 사용하여 현재 값을 업데이트 하자.
    • ES6의 스프레드 연산자...를 사용하여, 이전 tweets(prev)에 대해, 새로운 배열(새로 작성한 트윗과, ...그 이전 것들)을 리턴해주자.

3. 트윗 내용 나열하기

1. 트윗 내용이 든 tweets state는 배열이기 때문에, 배열의 item을 나열하기 위해 map() 메서드를 사용하자.

   <div>
    {tweets.map((tweet) => (
      //tweetObj 만들 때 각각의 tweet에 할당한 id 값을 div의 key에 넣어주자
      <div key={tweet.id}>
        <h4>{tweet.tweet}</h4>
      </div>
    ))}
   </div>

전체 코드

📍 Home.js

import React, { useEffect, useState } from "react";
import { dbService } from "fbase";
import {
  collection,
  addDoc,
  serverTimestamp,
  query,
  getDocs,
} from "firebase/firestore";

const Home = () => {
  //홈에서 트윗 내용 작성하는 폼
  const [tweet, setTweet] = useState("");

  //0. 작성한 트윗 가져오기: 기본 값은 빈 배열
  const [tweets, setTweets] = useState([]);

  const getTweets = async () => {
    /*1. DB에서 컬렉션 가져오기
    dbService에 있는 tweets 컬렉션을 가져오는 쿼리 만들기*/
    const q = query(collection(dbService, "tweets"));

    /*2. 컬렉션의 다큐먼트 모두 가져오기
    - 쿼리를 실행하고 결과를 QuerySnapshot으로 반환하면 tweets 컬렉션의 document들을 얻는다.
    - 따라서 querySnapshot은 tweets 컬렉션의 document들을 모아놓은 배열이다.*/
    const querySnapshot = await getDocs(q);

    //3. 각각의 다큐먼트를 나열
    querySnapshot.forEach((document) => {
      /*각각의 다큐먼트를 나열할 때 {data, id} 오브젝트 형태로 나열하자.
    - document의 data를 가져오기 위해 data() 메서드 사용
    - 트윗 하나씩 나열 할 때 쓸 key 값 필요하기 때문에 id 할당*/
      const tweetObj = {
        ...document.data(),
        id: document.id,
      };
      //- setTweets() 모디파이어로 이전 tweets(prev)에 대해, 새로운 배열(새로 작성한 트윗과, ...그 이전 것들)을 리턴해주자.
      setTweets((prev) => [tweetObj, ...prev]);
    });
  };

  //4. 컴포넌트가 마운트되면 useEffect()사용
  useEffect(() => {
    getTweets();
  }, []);

  const onSubmit = async (event) => {
    event.preventDefault();
    //트윗하기 누르면 새로운 document 생성하기
    try {
      const docRef = await addDoc(collection(dbService, "tweets"), {
        tweet, // tweet(다큐먼트의 key): tweet(value로 tweet state 값)
        createdAt: serverTimestamp(), //Date.now(),로 해도 되지만 이왕 있는거 함 써보자(타임존 동북아3 = 서울로 설정되어 있음)
      });
      console.log("Document written with ID: ", docRef.id);
    } catch (error) {
      console.error("Error adding document: ", error);
    }
    //state 비워서 form 비우기
    setTweet("");
  };

  const onChange = (event) => {
    const {
      target: { value },
    } = event;
    setTweet(value);
    //console.log(tweet);
  };

  return (
    <>
      <div>
        <form onSubmit={onSubmit}>
          <input
            type="text"
            placeholder="무슨 일이 일어나고 있나요?"
            maxLength={120}
            value={tweet}
            onChange={onChange}
          />
          <input type="submit" value="트윗하기" />
        </form>
      </div>
      {/*DB에서 가져온 트위터 나열*/}
      <div>
        {tweets.map((tweet) => (
          //tweetObj 만들 때 각각의 tweet에 할당한 id 값을 div의 key에 넣어주자
          <div key={tweet.id}>
            <h4>{tweet.tweet}</h4>
          </div>
        ))}
      </div>
    </>
  );
};

export default Home;