FireStore 데이터

1)app.js에서 firestore 데이터 사용하기

(1) 데이터 전체 읽어오기

collection()으로 찾은 다음, getDocs()로 콜렉션 내의 데이터를 가져온다.

그리고 forEach문으로 내용을 확인할 수 있다. (배열이 아니기 때문)

import { db } from "./firebase";
import { collection, getDoc, getDocs } from "firebase/firestore";
...
React.useEffect(async() => {
    const query = await getDocs(collection(db, 'bucket'));
		console.log(query);
    query.forEach((doc) => {
      console.log(doc.id, doc.data());
    });
  }, []);

(2) 데이터 추가하기

콜렉션을 찾고 addDoc() → 대시보드에서 찰 추가되었는지 확인

import { db } from "./firebase";
import { collection, addDoc } from "firebase/firestore";
...
const docRef = await addDoc(collection(db, 'bucket'), {
     completed: false,
     text: "new"
   })

(3) 데이터 수정하기

콜렉션을 찾고 도큐먼트 id로 updateDoc()

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

  }, []);

(4) 데이터 삭제하기

콜렉션을 찾고 도큐먼트 id로 updateDoc()

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

  }, []);

2) 콜렉션 이름 변경하기

(1) 콜렉션 이름을 바꿔서 추가하기

// bucket에서 buckets로 이름 바꾸기! 그리고 대시보드를 확인
import { db } from "./firebase";
import { collection, addDoc } from "firebase/firestore";
...
const docRef = await addDoc(collection(db, 'buckets'), {
     completed: false,
     text: "new"
   })