[React] 최신 Firebase Firestore 사용하기

 

Firebase의 기본 설정이 필요하다면 아래 글을 참고하길 바란다.

[React] 최신 Firebase에서 로그인 구현하기

 

앞서 Firestore와 Real time database의 차이점을 간단하게 짚고 넘어가자.

먼저, 요금제에 차이가 있다. Firestore는 입출력 횟수당 요금이 부과되지만 Real time database는 입출력 대역폭으로 요금이 부과된다.

또한 후자는 연결할 수 있는 유저의 제한이 있다. 아마도 동시접속자 인듯하다. 하지만 기본이 20만 유저이기에 왠만한 서비스에서는 고려하지 않아도 된다.

두번째로, 저장되는 방식에 차이가 있다.

Firestore는 계층식으로 저장되는 컴퓨터의 폴더와 흡사한 구조이고, Real time db는 우리가 잘아는 Json의 형태로 저장된다.

두 방식 모두 장단점이 있지만 데이터간 유기적인 연결이 필요한 경우 아무래도 후자가 조금 더 낫고, 전자의 경우는 데이터를 한눈에 보기 편하기 때문에 관리 측면에서 좋다.

Firestore가 조금 더 최신에 나온 방식으로 차이를 잘 모르겠다면 일단 Firestore를 써보는게 어떨까, 요금도 저렴한듯 하다.

 

개념 알기

Firestore에는 collection, doc, field가 있다.

collection은 doc만을 가질 수 있고 값들을 넣을 수 없다. 즉 폴더를 담는 폴더이다.

doc는 field를 가질 수 있고 하위에 collection을 가질 수 있다.

최상단 Collection > Doc > Field 또는 Collection > ... 반복 의 구조가 되는 것이다.

 

데이터 입력

import {
  collection,
  deleteField,
  doc,
  getDoc,
  setDoc,
  Timestamp,
  updateDoc,
} from "@firebase/firestore";
//import는 필수이다.



//현재 로그인된 user의 기본적인 데이터는 authService.currentUser에서 참조 가능하다.
const ref = doc(dbService, "User", authService.currentUser.uid);
//최상위 User > UID폴더내에 값을 넣고자 하는 경우이다.

      setDoc(
        ref,
        { [nickname]: { imageUrl: imageUrl, fullName: fullName } },
        { merge: true }
      );
      //setDoc을 사용해서 앞서 선언한 doc와 원하는 데이터를 입력해주면된다.
      //Firestore에 object 형식의 데이터를 삽입할 수 있으며, 위와 같이 입력하면
      //nickname이 키 값, 이하 부분이 value 값이 된다.
      
	  //Firestore의 setDoc은 해당 doc의 모든 요소를 입력하는 변수로 대체해버리는데,
      //merge : true 옵션 혹은 updateDoc를 사용시에 기존의 데이터에 합치게 된다.

 

데이터 출력

//깊이가 있는 곳에 데이터를 삽입하고싶은 경우는 아래와 같이 path를 /를 사용해 만들어주면된다.
//결과적으로 아래 코드는 Notice/1128/1/title doc의 모든 필드를 불러오는 동작을 한다.

const ref = doc(dbService, "Notice/1128/1", title);
  let res = await getDoc(ref);
  //Firestore의 모든 함수는 비동기 함수이므로 await&async 혹은 then을 적절히 사용하자.
  //get은 데이터가 없을 경우 null을 반환하며, 가져온 데이터는 아래와 같이 res.data()의 형식으로 뽑아 낼 수 있다.
  return res.data() ?? {};

 

데이터 삭제

//데이터 삭제시는 아래와 같이 update함수와 함께 (merge : true를 사용해도 동일함)
//해당 Field에 deleteField() 함수를 입력해주면 된다.

const ref = doc(dbService, "User", authService.currentUser.uid);
updateDoc(ref, { [nickname]: deleteField() });

 

데이터 필터링

Cloud Firestore로 데이터 정렬 및 제한  |  Firebase Documentation

데이터 필터링 및 정렬에 관한 부분은 공식문서에 잘 정리되어있으며, 또, Real Time DB에서 간단하게 다뤄보겠다.