[Firebase] React에서 Firebase로 database 이용하기

 

React에서 Firebase로 database 이용하기

 

---

 

 React에서 Firebase로 데이터베이스에 데이터 추가하기, 데이터베이스에 있는 데이터 불러오기, 데이터베이스에 있는 데이터 삭제하기를 구현하는 방법을 정리해보려 한다.

 

firebase 9.16.0 버전 기준으로 작성되었습니다.

 

---

 

1. firebase 파일 만들기 (src 폴더 하위에 생성하면 됨)

 

// src/fbase.js

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

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APPID,
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

 

 

2. setDoc으로 데이터 추가하기, query로 데이터 불러오기, deleteDoc으로 데이터 삭제하기

 

import React from "react";
import {
  setDoc,
  doc,
  deleteDoc,
  collection,
  query,
  where,
  getDocs,
} from "firebase/firestore";
import { db } from "../fbase";

function App() {

  // Firebase에 데이터 추가하기
  const addDatabase = async () => {
    try {
      setDoc(doc(db, "컬렉션 이름", "문서 이름"), {
        name: "kim"
        id: 123,
      });
    } catch (error) {
      console.log(error);
    }
  };

  // 조건에 맞는 데이터 가져오기
  const getDatabase = async () => {
    const q = query(
      collection(db, "컬렉션 이름"),
      where("name", "==", "kim")
      ); // 해당 컬렉션 내에 이름이 kim인 문서만 가져오기
    const querySnapshot = await getDocs(q);
    querySnapshot.forEach(() => {
      // 가져온 문서에 대해 하고 싶은 동작 작성
    });
  };

  // Firebase에 데이터 삭제하기
  const deleteDatabase = () => {
    try {
      deleteDoc(doc(db, "컬렉션 이름", "문서 이름");
    } catch (error) {
      console.log(error);
    }
  };
  
  // 생략
}

 

---

 

코드 짤 때는 정말 어렵고 오래 걸렸는데 막상 정리하니까 짧네😵

 

 

참고 자료

https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ko