TIL 20210928 [항해99 13일차]

• 리액트에서 파이어베이스 연동하기

(1) 파이어베이스 패키지 설치

yarn add firebase

(2) config 가져오기

• 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 };

• App.js에서 firebase.js에서 내보낸 firebase DB 가져오기

import {db} from "./firebase";

• useEffect에서 데이터 불러와보기(firebase DB를 잘 가져왔는지 확인해 볼 수 있다.)

...
const bucket = firestore.collection("buckets");
React.useEffect(() => {
    console.log(db);
  }, []);
...

FireStore 데이터 가지고 놀기

(1) 데이터 전체 읽어오기
collection()으로 찾은 다음, getDocs()로 콜렉션 내의 데이터를 가져온다.
그리고 forEach문으로 내용을 확인할 수 있다. (사실 배열이 아니다.)

import { db } from "./firebase";
import { collection, getDoc, getDocs } from "firebase/firestore";
...
//async await는 한쌍으로 쓴다.
React.useEffect(async() => {
    //getDocs: 어떤 콜렉션인지 물어봄 => ()안에 콜렉션 넣음
    //'bucket': Firebase에 지정한 콜렉션 이름
    const query = await getDocs(collection(db, 'bucket'));
		console.log(query);
    //forEach: 객체안에 포함되어있는 내장함수 사용(반복문) -> array의 내장함수가 아니라 documents 모음객체의 
               내장함수 사용하는 것!
    query.forEach((doc) => {
      console.log(doc.id, doc.data());
    });
  }, []);

p.s. 1. console.log(query);
-> 서버에 통신을 했으면 이 친구가 답을 줄지 언제줄지 확신할 수 없는 상태이고 이런걸 비동기 통신이라고 한다. => 그래서 console에 찍었을 때 promise가 나오는데 언젠가 답변을 주겠다는 것! => promise로 넘어온 것은 데이터 확인을 못해서 async await를 사용한다.
2. query.forEach((doc) => {console.log(doc.id, doc.data());});
-> async await를 사용해서 promise에서 데이터를 받았지만, 보기 어렵기 때문에 읽기 좋은 형태로 만드는 방법이다. 배열이 아닌 getDocs의 객체를 받았기 때문에 객체의 내장함수 forEach를 사용!

(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() => {
	//"P5Oz4GbccEg9uaca8sJG": 파이어베이스에서 자동으로 지정된 id값
    const docRef = doc(db, "bucket", "P5Oz4GbccEg9uaca8sJG");
    //콜렉션을 안 넣는 이유-> 고칠 doc이 있어서 바로 docRef로 넣는 것 
    await updateDoc(docRef, {
      completed: true,
    });

  }, []);

(4) 데이터 삭제하기
콜렉션을 찾고 → 도큐먼트 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);

  }, []);

• 콜렉션 이름을 바꿔서 추가하면 어떻게 될까?

콜렉션 이름만 바꿔서 해보자!

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

새로운 콜렉션이 생긴다.

오늘은 리액트에서 파이어베이스를 연동하고 나서 데이터베이스를 전체 읽어오고 추가, 수정, 삭제하는걸 천천히 공부해봤다. 파이어베이스를 지금까지 사용해본 내 후기는...
파이어베이스 사용하기 편하고 괜찮군..! 😎