리액트에 Firebase 연동하기

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

npm install firebase

2) config 가져오기

(1) 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 };

(2) firebase 대시보드에서 웹버튼을 눌러준다.

(3) App.js에서 firebase.js에서 내보낸 firestore DB 가져오기

import {db} from "./firebase";

(4) useEffect에서 데이터 불러오기

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