[React] Firebase CRUD 다양한 예시 코드!

firebase에서 DB 관리를 할 수 있는 Firestore 기능

React로 Firebase 연동 후 CRUD 기능에 대해서 복사해서 사용하려 했던 코드들을 공유하고자 한다. 개발자 모두 화이팅!

 create

• 원하는 collection 안에문서에 의미 있는 ID가 필요하지 않을 경우 id를 생성하여 DB에 저장한다.

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

function handleOnSubmit() {  
    const docRef = addDoc(collection(dbService, "create"), { // create라는 collection 안에 넣겠다는 뜻 
      create: 'create',
    });
    if (docRef) {
      console.log('create 성공');
    }
  }

• 원하는 collection 안에 원하는 문서 ID를 입력할 떄 쓴다.

import { doc, setDoc } from "firebase/firestore";

function handleOnSubmit() {  
    const docRef = setDoc(doc(dbService, "create", 'firstStep'), { // create라는 collection 안에 firstStep이라는 document에 저장하겠다는 뜻
      create: 'create',

    });
    if (docRef) {
      console.log('create firstStep에 저장 성공');
    }
  }

read

• get() 을 사용하여 단일 문서의 내용을 검색하여 읽어온다.

import { doc, getDoc } from "firebase/firestore";

async function fetchData() { 
    const docRef = doc(dbService, "create", "firstStep"); // create라는 collection안에 firstStep이라는 document를 읽어온다.
    const docSnap = await getDoc(docRef);
    if (docSnap.exists()) {
      console.log("Document data:", docSnap.data());
    } else {
      console.log("No such document!");
    }
  }

• 원하는 collection 안에 모든 문서를 읽어올 때 사용한다.

import { collection, getDocs } from "firebase/firestore";

async function fetchData() {  
    const data = await getDocs(collection(dbService, "create")); // create라는 collection 안에 모든 document를 읽어올 때 사용한다.
    const newData = data.docs.map(doc => ({ ...doc.data()}));
    console.log(newData);
  }

update

• 전체 문서를 덮어쓰지 않고 문서의 특정 field 값만을 업데이트할 때 사용한다.

import { doc, updateDoc } from "firebase/firestore";

function handleOnUpdate() { 
    const docRef = doc(dbService, "create", 'firstStep');
    updateDoc(docRef, { 
      update: valuel
    });
    if (docRef) {
      console.log('update 성공');
    }
  }

delete

• 문서에서 특정 필드를 삭제하려면 문서를 업데이트할 때 를 deleteField()사용하여 삭제할 수 있다.

import { doc, updateDoc, deleteField } from "firebase/firestore";

function handleOnDelte() { 
    const docRef = doc(dbService, "create", 'firstStep');
    updateDoc(docRef, {
      delete: deleteField()
    });
    if (docRef) {
      console.log('delete 성공');
    }
  }

• 문서 전체를 삭제하려면 다음 언어별 delete() 를 사용한다.

import { doc, deleteDoc } from "firebase/firestore";

await deleteDoc(doc(dbService, "create", "firstStep"));