[TIL] 240215(목) firebase CRUD 복습하기

Firebase CRUD

파이어베이스 CRUD 코드 중에서 내가 이번 프로젝트에 맡았던 부분 중 CREATE와 READ 코드에 대해서 복습해보고자 한다.

CREATE 코드

1. 서버에 네트워크 요청을 한 번 더 보낸다.
   장점 : 데이터의 일관성을 유지할 수 있다.
   단점 : 서버의 부담을 늘린다.
2. Optimistic Update
   서버의 부담을 줄이고, UI를 미리 업데이트 하는 방법

  /* 포스트 글 추가하기 */
  const addPostSubmit = async (newpost) => {
    const collectionRef = collection(db, "postInfo");
    await addDoc(collectionRef, newpost);
    setPosts((posts) => [newpost, ...posts]);
  };

READ 코드

useEffect (()=>{  
    이 안에서 비동기 함수를 새로 선언한다.   
    이후 선언한 비동기 함수를 그대로 호출한다.

** querySnapshot : 파이어베이스에서 사용하는 이름  
}, [])

  /* 파이어베이스 데이터 불러오기 */

  useEffect(() => {
    const fetchData = async () => {
      const q = query(collection(db, "postInfo"), orderBy("postDate", "desc"));
      const querySnapshot = await getDocs(q);
      const initialPosts = [];

      querySnapshot.forEach((doc) => {
        const data = {
          ...doc.data(),
          id: doc.id
        };
        // console.log(data.id);

        initialPosts.push(data);
      });
      setPosts(initialPosts);
    };

    fetchData();
  }, []);

🚨 처음에 의존성 배열에 posts를 넣었더니, posts state가 변경이 될 때마다 렌더링이 일어나게 되어 무한루프가 반복 되었다.
useEffect를 사용할 때는 무한 렌더링이 일어나지 않도록 조심해야한다.

UPDATE와 DELETE 코드 부분은 내가 작성한 부분은 아니지만 코드리뷰를 통해 보다 더 자세하게 값을 수정하고 삭제할 수 있도록 학습해야겠다.