[Firebase] onsnapshot, get 차이 / 트윗 삭제 실시간 반영하기

1. 문제 상황

트윗 삭제 버튼 클릭 시 파이어베이스 DB에서는 삭제되었으나 화면에 바로 반영되지 않음

새로고침하거나 다른 페이지에 갔다가 다시 들어와야 화면에 반영됨

 

 

2. 다른 화면에서 트윗을 삭제할 때는 바로 반영됨

Profile 페이지에서 트윗을 삭제할 때는 화면에 바로 반영되지 않았지만,

Home 페이지에서는 삭제된 내역이 화면에 바로 반영됨

 

 

 

3. 코드 비교 (Profile vs Home)

화면에 바로 반영되지 않았던 Profile 컴포넌트에서는 get 함수를 사용했고,

화면에 즉각 반영되었던 Home 컴포넌트에서는 onSnapshot 함수를 사용했음

Home에서는 트윗 삭제 시 리렌더링이 일어났고, Profile에서는 리렌더링 되지 않음 (console.log로 확인)

// Profile.jsx (get함수 사용, 리렌더링X)

const getMyTweets = async () => {
    await dbService
      .collection("tweets")
      .where("creatorId", "==", userObj.uid)
      .orderBy("createdAt", "desc")
      .get()
      .then((data) => {
        const tweetArray = data.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        setMyTweets(tweetArray);
      });
  };

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

// Home.jsx (onSnapshot함수 사용, 리렌더링O)

useEffect(() => {
    dbService
      .collection("tweets")
      .orderBy("createdAt", "desc")
      .onSnapshot((snapshot) => {
        const tweetArray = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        setTweets(tweetArray);
      });
  }, []);

 

 

4. get() vs onSnapshot() 

• Firestore에서 데이터를 불러오는 방법은 get(), onSnapshot() 두가지가 있음
• get()은 데이터를 딱 1번만 불러옴. 실시간 반영 안되고, 변경된 내용을 확인하려면 get()을 다시 호출해야함
• onSnapshot()은 데이터 변경을 감지하는 리스너를 달아주는 것임. 데이터가 변경될 때마다 스냅샷이 생성되어, 실시간으로 변경내역을 확인할 수 있음
• 데이터를 뿌려주기만 할 때는 get(), CRUD를 실시간으로 반영해야 할 때는 onSnapshot() 사용

 

There are two ways to retrieve data stored in Cloud Firestore. Either of these methods can be used with documents, collections of documents, or the results of queries:
- Call a method to get the data.
- Set a listener to receive data-change events.

 

When you set a listener, Cloud Firestore sends your listener an initial snapshot of the data, and then another snapshot each time the document changes.

 

When you use get() you "retrieve the content of a single document" only once. It's a kind of "get and forget": If the document changes in the (back-end) Firestore database you will need to call get() again to see the change.

On the opposite, if you use the onSnapshot() method you constantly listen to a document as explained in the doc:

 

You can listen to a document with the onSnapshot() method. An initial call using the callback you provide creates a document snapshot immediately with the current contents of the single document. Then, each time the contents change, another call updates the document snapshot.

 

As explained in these docs, these two methods apply to one document or to a collection of documents (including a query).

 

출처: https://stackoverflow.com/questions/54479892/difference-between-get-and-onsnapshot-in-cloud-firestore

 

 

5. 코드 수정 get()->onSnapshot()

onSnapshot으로 바꾸니 Profile 페이지에서도 트윗 삭제 시 목록에 바로 반영됨

// Profile.jsx

useEffect(() => {
    dbService
      .collection("tweets")
      .where("creatorId", "==", userObj.uid)
      .orderBy("createdAt", "desc")
      .onSnapshot((snapshot) => {
        const tweetArray = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        setMyTweets(tweetArray);
      });
  }, []);