리액트 기초반 - 4

Firebase

웹은 클라이언트가 서버에게 요청, 서버가 클라이언트에게 응답!
Firebase는 서버리스이다.
Firebase의 기능 중 Firestore를 사용

• firestore는 클라우드 데이터베이스를 제공하는 서비스입니다.
• 데이터가 추가되고, 삭제하고 가져다 쓸 수 있습니다!
• 리액트와는 firebase라는 패키지를 통해 편리하게 연결할 수 있어요!
• 주의! 우리는 spark 요금제를 쓸거예요!(무료입니다!)

리액트 Firebase 연동

파이어베이스 패키지 설치yarn add firebase

src 폴더 하위에 firebase.js 파일을 만들기. 개인 파이어베이스에서 제공해주는 코드 복사해서 붙여넣는다.

//firebase.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    // firebase 설정과 관련된 개인 정보
};

// firebaseConfig 정보로 firebase 시작
initializeApp(firebaseConfig);

// firebase의 firestore 인스턴스를 변수에 저장
const db = getFirestore();

// 필요한 곳에서 사용할 수 있도록 내보내기
export { db };

---

firebase.js에서 내보낸 firestore DB가져오기
import {db} from "./firebase";

FireStore 데이터 가지고 놀기

파이어스토어의 데이터를 가지고 올 때는 collection 먼저 접근 후 doc에 접근

데이터 전체 읽어오기

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

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()); //id와 데이터 가져옴
    });
  }, []);

여기서 forEach는 배열 내장함수가 아니고 getDocs의 객체 내장함수이다.(이름이 같음)
forEach는 Doc 하나 하나를 의미
async-awit을 안쓰면 Promise{<pending>}이 나온다.

데이터 추가하기

콜렉션을 찾고 → addDoc()!

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

콜렉션 이름을 바꿔서 추가하면 새로운 콜렉션이 생긴다.

데이터 수정하기

콜렉션을 찾고 → 도큐먼트 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,
    });

  }, []);

데이터 삭제하기

콜렉션을 찾고 → 도큐먼트 id로 deleteDoc()!

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

  }, []);