[React] Firebase 데이터 다루기

Kyoo·2022년 3월 18일

Firebase React

해당 글은 프론트엔드를 공부하면서 기록 목적으로 작성한 내용입니다.
잘못된 내용이 있다면 제보 부탁드립니다. 🙇‍♂️

1. 개 요

이번에 팀 프로젝트를 하면서 우리가 만든 게시글 데이터를 서버에 저장하는 기능이 필요했다.

프론트엔드만으로 팀 프로젝트를 진행하다보니 누군가 서버를 만들었어야 했는데 기존에 Firebase를 사용해 본 경험이 있어 내가 담당하게 되었다.

프로젝트를 하면서 Firebase 데이터를 다루는 기본적인 방법을 이 글을 통해 기록하고자 한다.

2. Firebase 연동하기

Firebase Console 로 접속하여 프로젝트를 만들어야 하는데, 이 글에서 프로젝트를 만드는 방법은 생략하고 참고할 수 있는 공식 문서 내용을 최하단에 공유한다.

본격적으로 Firebase를 연동하는 방법에 대해서 기록해 본다.
먼저, src 폴더 하위에 firebase.js 파일를 만들고, firebaseConfig 코드를 작성하였다.

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

const firebaseConfig = {
  // firebase 설정과 관련된 api 정보
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};

initializeApp(firebaseConfig);

export const db = getFirestroe();

firebase 설정과 관련된 정보는 api 를 담고 있어 다음과 같이 코드를 숨겼다.
api 숨기는 방법과 불러오는 것에 대해 자세한 내용은 이전 글에서 확인해 볼 수 있다.

3. Firebase 데이터 다루기

firebaseConfig 코드 파일을 만들었다면 이제 App.js에서 데이터를 다뤄보겠다.

3-1. 데이터 가져오기

가져온 데이터의 정보는 콘솔에서 확인할 수 있도록 코드를 만들었다.
만약, 아직 저장된 데이터가 없다면, Firebase console에서 문서 추가를 통해 만들어 본다.

// src/App.js
import {db} from "./shared/firebase"
import {collection, getDocs} from "firebase/firestore"

useEffect(async () => {
	// db 뒤에 "techInfo"는 정보를 가져올 컬렉션 이름이다.
    const query = await getDocs(collection(db, "techInfo")); 
    query.forEach((doc) => {
      console.log(doc.id, doc.data())
    });
  }, [])

3-2. 데이터 추가하기

예제 코드에서는 저장 버튼이나 입력을 받는 코드를 만들지 않고, useEffect를 통해
페이지 로드 시 {contents: "데이터 저장 테스트"} 라는 데이터가 저장되도록 만들었다.

만들어진 데이터는 Firebase Console 에서 바로 확인할 수 있다.

// src/App.js
import {db} from "./shared/firebase"
import {collection, addDoc} from "firebase/firestore"

useEffect(async () => {
    addDoc(collection(db, "techInfo"), {contents: "데이터 저장 테스트"})
  }, [])

3-3. 데이터 수정하기

데이터를 수정할 때에는 객체에 대한 정보를 입력하여 Firebase 서버로 요청해야 하는데
예제 코드에서는 컬렉션 뒤 아이디를 직접 입력하여 데이터를 수정하도록 코드를 만들었다.

// src/App.js
import {db} from "./shared/firebase"
import {updateDoc, doc} from "firebase/firestore"

useEffect(async () => {
	// 콜렉션("techInfo") 뒤에는 컬렉션 아이디 정보를 보내야 한다.
    const docRef = doc(db, "techInfo", "2ALWefUBtuyvy58ffuno");
    updateDoc(docRef, {contents: "데이터 수정 테스트"})
  }, [])

3-4. 데이터 삭제하기

데이터 삭제도 수정하기와 동일하게 컬렉션과 아이디 정보를 Firebase 서버로 요청을 보내면 된다.

// src/App.js
import {db} from "./shared/firebase"
import {doc, deleteDoc} from "firebase/firestore"

useEffect(async () => {
    const docRef = doc(db, "techInfo", "2ALWefUBtuyvy58ffuno");
    deleteDoc(docRef);
  }, [])