Firebase 데이터 접근 순서

1. 콜렉션
2. 도큐멘트

getDocs - 전체 데이터 읽기

import { db } from "./firebase";
import { collection, getDocs } from "firebase/firestore";
// getDoc을 사용하면 도큐멘트를 한 개만 가지고 옴
.
.
React.useEffect(() => {
	console.log(db);
	const query = getDocs(collection(db, "filmfestival"));
	// getDocs(데이터를 가져올 콜렉션)
	// collection(db정보, 콜렉션 이름)
}, []);

query를 콘솔로 확인하면 Promise라는 요청이 뜬다. 언젠간 답변을 주겠다는 의미다. 내 컴퓨터에서는 요청하는 즉시 답변이 돌아오지만 서버와 통신을 하는 경우에는 답변을 확신할 수 없기 때문이다. 이것을 비동기통신이라고 한다.

React.useEffect(async() => { // async: 비동기처리
		console.log(db);
		const query = await getDocs(collection(db, "filmfestival"));
		// await: 비동기 처리 결과를 가져올 때까지 기다리는 것으로 async와 함께 쓰인다.
		queary.forEach((doc) => { // forEach: getDocs로 가져온 객체 안에 포함된 반복문 내장함수
			console.log(doc.id, doc.data()); //forEach에서 doc은 도큐멘트 한 개를 의미
		});
	}, []);

Promise만으로는 데이터를 인식할 수 없으므로 forEach를 사용해 데이터를 가져온다.

addDoc - 데이터 추가하기

import { db } from "./firebase";
import { collection, addDoc } from "firebase/firestore";
.
.
React.useEffect(async() => {
		const docRef = await addDoc(collection(db, "filmfestival"), {
		     watched: false,
		     title: "마스무라 야스조 ・ 거인과 완구(1958)"
		   })
	}, []);

데이터 읽기와 마찬가지로 addDoc 안에 콜렉션 정보를 입력한 후 딕셔너리로 데이터 정보를 입력하면 끝!

		const docRef = await addDoc(collection(db, "nightofthelivingcinephile"), {
		     watched: false,
		     title: "마스무라 야스조 ・ 거인과 완구(1958)"
		   })

콜렉션을 기존 이름과 다르게 지정하면 새로운 콜렉션이 자동으로 생성되고 데이터 역시 추가된다.

updateDoc - 데이터 수정하기

import { db } from "./firebase";
import { collection, doc, updateDoc } from "firebase/firestore";
.
.
React.useEffect(async() => {
    const docRef = doc(db, "filmfestival", "P5Oz4GbccEg9uaca8sJG");
    await updateDoc(docRef, {
      watched: true,
    });
  }, []);

updateDoc에 콜렉션을 넣기 전에 먼저 수정한 콜렉션 정보를 변수로 지정했다. 읽기, 추가하기와 다르게 이번에는 수정해야 할 데이터의 ID를 추가로 입력한다.

deleteDoc - 데이터 삭제하기

import { db } from "./firebase";
import { collection, doc, deleteDoc } from "firebase/firestore";
...
React.useEffect(async() => {
    const docRef = doc(db, "filmfestival", "P5Oz4GbccEg9uaca8sJG");
    await deleteDoc(docRef);
  }, []);

수정하기와 마찬가지로 삭제할 데이터 ID까지 입력한 후 deleteDoc으로 처리하면 끝!