[React] React-calendar로 달력 구현하기-2 (Firebase에서 데이터 가져오기)

이전 포스팅에 이어, 이제 Dot표시를 할 날짜들의 배열과 그 날짜에 맞는 데이터를 Firebase에서 가져와서 저장해보자.

Firebase 사용법은 Firebase - 공식문서와 예전 글 참고 React에서 FireBase DB사용하기

Firebase와 관련된 코드만 가져오자면

import {
  addDoc,
  collection,
  onSnapshot,
  query,
  where,
} from "firebase/firestore";
import { dbService } from "../fbase";

.....
export const myApp = () =>{
  const onValid = async (data) => {
  //form 데이터 POST하여 db에 저장
    setPlan([]);
    await addDoc(collection(dbService, "calendarMemo"), {
      text: data.text,
      date: new Date(value).toLocaleDateString("ko", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
      }),
      userId: user?.uid,
    });
    resetField("text");
    //useForm reset
  };
  const [mark, setMark] = useState([]);
  const [plan, setPlan] = useState([]);
  const getDot = async () => {
  	
    await onSnapshot(
      query(
        collection(dbService, "calendarMemo"),
        where("userId", "==", user.uid)
      ),
      //현재 세션에 존재하는 유저와 "calendarMemo"안의 data들의 user.id가 같은 것만 가져옴
      (col) => {
        col.docs.map((dd) => {
          setMark((prev) => [...prev, dd.data().date]);
          //마크를 표시할 날짜들만 저장
        });
      }
    );
  };
  const getDiary = async () => {
    await onSnapshot(
      query(
        collection(dbService, "calendarMemo"),
        where("userId", "==", user.uid),
        where(
          "date",
          "==",
          new Date(value).toLocaleDateString("ko", {
            year: "numeric",
            month: "2-digit",
            day: "2-digit",
          })
        )
        //firebase query에 where은 위와 같이 여러 번 사용이 가능하다!!
        //내꺼 + 유저가 달력에서 선택한 날짜와 같은 데이터들만 가져오기
      ),
      (col) => {
        const newArr = col.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        setPlan(newArr);
      }
      //가져온 데이터들 저장. 꼭 위의 방법으로 저장할 것!
    );
  };
  useEffect(() => {
    getDot();
  }, []);
  useEffect(() => {
    getDiary();
  }, [value]);
}

getDot()과 getDiary()를 통합해서 사용할까 했는데, 이렇게 따로 가져오는 것이 더 효율적일 것 같아서 따로 사용한다.

이제 삭제, 편집 기능만 추가하면 끝이다.