TIL 27. firebase - onSnapshot, edit, delete

자바스크립트에 파이어베이스를 연동해서 프로젝트를 진행한 적은 있지만,
리엑트에 파이어베이스를 연동해서 해보는 건 처음이다.
useState 같은 hook을 사용하면서 파이어베이스 문법도 신경써야하다보니 좀 성가셨다.

개인적으로 공부하면서 코딩하다보니 CRUD를 만들 때 사용하던 getDocs보다,
실시간으로 DB의 변경이 일어날 때마다 작동되는 onSnapshot을 사용하면 더 좋겠다고 생각했다.

delete와 update할 때 폴더 경로를 입력해서 삭제하는 방식도 좋다고 생각했다.

---

onSnapshot

const getCommentList = async () => {
  let cmtObjList = [];
  const q = query(
    collection(dbService, "comments"),
    orderBy("createdAt", "desc")
  );
  const querySnapshot = await getDocs(q);
  querySnapshot.forEach((doc) => {
    const commentObj = {
      id: doc.id,
      ...doc.data(),
    };
    cmtObjList.push(commentObj);
  });
 }

기존에는 getDocs를 사용해서 위 코드처럼 사용했지만, 매번 다시 불러와야했다.
하지만 onSnapshot을 쓰면 DB에 추가, 수정, 삭제가 일어날 때마다 실행된다.

useEffect(() => {
    onSnapshot(collection(dbService, 'post'), (snapshot) => {
       const postArray = snapshot.docs.map((doc) => ({
         id: doc.id,
         ...doc.data(),
       }));
       setPosts(postArray);
     });
  }, []);

위 코드는 불러올 때의 기준을 정하는 query를 사용하지 않은 코드다.
위의 코드는 화면에 보여질 때, 시간 순서대로 보여주지 않는다.
아래는 query를 사용한 코드다.

useEffect에 넣어서 처음에 컴포넌트가 마운트 됐을 때 (처음 나타났을 때) 실행되게 했다.

useEffect(() => {
    const q = query(collection(dbService, 'post'), orderBy('createAt', 'desc'));
    onSnapshot(q, (querySnapshot) => {
      const postsArr = querySnapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setPosts(postsArr);
    });
  }, []);

query를 사용하면 코드가 위 코드처럼 살짝 바뀐다.
화면에 시간 순서대로 잘 출력된다.

Delete

게시물을 삭제할 때, DB의 경로를 폴더 경로처럼 입력해주는 걸로도 지울 수 있다.

deleteDoc(doc(dbService, `post/${postObj.id}`))

처럼 폴더 경로를 입력해서 삭제할 수 있다.

Update

updateDoc(doc(dbService, `post/${postObj.id}`)

업데이트도 폴더 경로를 입력해서 삭제할 수 있다.