[React] FireStore

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

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());
    });
  }, []);

• collection() : 컬렉션 내에 있는 정보 가지고 올 때

collection(db, "컬렉션 이름")
// db : 어떤 firestore인지 (firebase.js에서 만들어서 import 해야함)
// 컬렉션을 넣기 전에 어떤 db에 있는 컬렉션인지 알아야하니까 db를 선언

• 어떤 데이터에 접근을 할 때 항상 컬렉션 -> docs
  데이터가 저장되는 공간을 Collection이라고 부르고, Collection 안에는 Document

• getDoc : 하나 가지고 올 때

• getDocs : 여러개 한번에 가지고 올

getDocs(어떤 컬레션 인지)
getDocs(collection(db, 'bucket')) // 컬렉션 정보 넣어줌
// 컬렉션 정보 : 모든 도큐먼트를 가지고 올 수 있음

'나 데이터 줘'라는 요청은 promise로 구성된다.
던지면 즉각 날라오지 않고 서버에 통신을 했으면 답을 언제 줄지 확신하지 못한다. 즉, 언제 받아도 상관없다는 말! 이것을 비동기 통신이라 하고 promise는 언젠가 답변을 주겠지하는 약속을 하는 것이다. (비동기 처리를 쉽게 해 주기 위한 객체)
그래서 promise를 열어보면 데이터가 없음.
그러면 promise로 넘어오는 데이터를 어떻게 확인을 해야하나? async await
async await : 작업이 끝나고 결과를 가져올 때 까지 기다린다는 뜻

getDocs : 어떤 객체로 가져옴
그래서 이 객체에 포함되어 있는 내장함수 forEach()를 사용
즉, getDocs()하면 return 되는 도큐먼트들 모음 객체의 내장함수 사용!
query.forEach((doc) -> doc : 각각 도큐먼트 하나하나를 의미

• (2) 데이터 추가하기

import { db } from "./firebase";
import { collection, addDoc } from "firebase/firestore";

const docRef = await addDoc(collection(db, 'bucket'), {
     completed: false,
     text: "new"
   })

• 어떤 데이터에 접근을 할 때 항상 컬렉션 -> docs
  데이터가 저장되는 공간을 Collection이라고 부르고, Collection 안에는 Document

addDoc(어떤 컬레션 인지), {
	// 추가할 데이터
}
addDoc(collection(db, 'bucket'), {
     completed: false,
     text: "new"
   })

• (3) 데이터 수정하기

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,
    });

  }, []);

• 어떤걸 수정할건지 무엇! = 도큐먼트
  • doc : 도큐먼트 정보 가지고 오는 것

doc(어떤 파이어 스토어인지, 컬렉션, 도큐먼트의 고유값(id))
const docRef = doc(db, "bucket", "P5Oz4GbccEg9uaca8sJG");

• 수정하기

updateDoc(어떤거 수정할건지, {
          // 어떤 정보로 수정할건지
     })

updateDoc(docRef, {
      completed: true,
    });

• (4) 데이터 삭제하기

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

  }, []);

• 어떤걸 삭제할건지 무엇! = 도큐먼트
  • doc : 도큐먼트 정보 가지고 오는 것

deleteDoc(어떤 도큐먼트인지)
deleteDoc(docRef)

• (5) 도큐먼트 추가하기

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