실시간 글 작성

그나저나 현재 트윗을 날리면 바로바로 화면에 보여지지 않고 새로고침해야 데이터베이스에서 받아와서 트윗을 렌딩한다.

새로 생성되는 트윗이 실시간으로 보여지게 만들어 보자.
그러기 위해서는 코드를 좀 많이 수정해야 한다.(눈물🥲)

onSnapshot() 메서드는 데이터베이스의 변화를 실시간으로 알려준다.

• 따라서 onSnapshot()메서드로 Document를 수신(listen)할 수 있다.
• 제공한 콜백을 사용한 초기 호출은 단일 Document의 현재 내용을 포함한 Document 스냅샷을 즉시 생성한다.
• 그런 다음 내용이 변경될 때마다, 다른 호출이 Document 스냅샷을 업데이트한다.

//데이터베이스에 뭔가 하게 되면 알 수 있도록 콘솔을 찍어보자!
useEffect(() => {
  getTweets();
  const q = query(collection(dbService, "tweets"));
  onSnapshot(q, (snapshot) => {
    console.log("Something happen!");
  });
}, []);

• 페이지가 렌더되면 콘솔에 "Something happen!"가 찍힌다.
  

• 트윗 내용을 입력할 때 "Something happen!"이 한 번 더 찍히고,
  입력 후 "Something happen!"이 한 번 더 뜬다.
  

리렌더링 굳이 필요 없는데 계속 되고 있기 때문에 오래된 데이터를 가져오는 기존의 forEach()에서 새로 생성/변경된 데이터는 새로고침해 반영되는 map()으로 코드를 수정하자!

• 구방법
  forEach로 다큐먼트 나열

//트윗 받는 방법
  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 q = query(collection(dbService, "tweets"));
    onSnapshot(q, (snapshot) => {
      console.log("Something happen!");
    });
  }, []);

• 신방법
  map으로 나열: 리렌더 안되고 한 번만 발생 (더 효율적)

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

//App > Router > Home 순으로 보낸 로그인한 유저 정보 prop으로 받기
const Home = ({ userObj }) => {
  //홈에서 트윗 내용 작성하는 폼
  const [tweet, setTweet] = useState("");

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

  //🔥트윗 가져오기: map으로
  useEffect(() => {
    //snapshot은 쿼리 같은 건데 docs를 가지고 있다.
    //tweets은 페이지를 불러올 때 snapshot에서 나오는 거다.
    //따라서 setTweets()을
    const q = query(
      collection(dbService, "tweets"),
      orderBy("createdAt", "desc")
    );
    const unsubscribe = onSnapshot(q, (snapshot) => {
      //모든 docs는 {} 오브젝트 반환하도록
      //아이디 가져오고, 그리고 나머지 데이터 전체 가져오기
      const tweetArr = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      //트윗어레이 확인해보자. 오케이 원하는대로 포맷된것을 확인할 수 있다!
      console.log(tweetArr);
      setTweets(tweetArr);
    });
    return () => {
      unsubscribe();
    };
  }, []);

  const onSubmit = async (event) => {
    event.preventDefault();
    //트윗하기 누르면 새로운 document 생성하기
    try {
      const docRef = await addDoc(collection(dbService, "tweets"), {
        //트윗 작성자
        creatorId: userObj.uid,
        text: tweet, //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.text}</h4>
          </div>
        ))}
      </div>
    </>
  );
};

export default Home;

참고