[🔥 Firebase] Cloud Firestore에서 하위 컬렉션 추가하는 법 & 읽어오는 법

지은·2023년 3월 28일

🌴 모동숲 마켓

목록 보기

2/9

게시판 기능을 구현하던 중...
나는 게시글들을 Boards라는 컬렉션에 저장했고, 컬렉션 안에 있는 도큐멘트들은 아래처럼 생겼다.
(컬렉션은 폴더 같은 개념이고, 도큐멘트는 폴더 안에 있는 데이터라고 보시면 됩니다!)

type: "buy"
title: "제목입니다."
body : "본문입니다."
cart : [아이템1, 아이템2, ...]
createdAt : 1679991242163
creatorDisplayName: "지은"
creatorId: "WOhBdlm4TZdXc5SdV51xcSY62"
done: false

이제 여기서 게시글마다 댓글들을 저장해야하는데, cart처럼 댓글도 그냥 배열로 관리해도 되지 않나..? 싶었지만 나중에 게시글을 수정(update)할 수 있는 권한을 게시글 작성자만 가능하도록 보안 규칙을 작성할 것이였기 때문에, 댓글은 하위 컬렉션을 만들어 따로 관리하기로 했다.

그런데 공식문서에 하위 컬렉션의 존재에 대한 설명은 있었지만 하위 컬렉션을 추가하고 읽어오는 법은 아무리 뒤져봐도 설명이나 예시 코드가 없었다..
한참 구글링하다가 찾아냈고..! 블로그에 정리해두려고 한다 🕺

하위 컬렉션 추가하는 법

import { db } from '../../fbase';
import { doc, setDoc, collection } from 'firebase/firestore';

...

const docRef = doc(collection(db, [컬렉션명], [도큐멘트명], [하위 컬렉션명]));
await setDoc(docRef, [저장할 데이터]);

예시

try {
  const commentRef = doc(collection(db, 'Boards', id, 'Comments'));
  await setDoc(commentRef, requestData);
  alert('작성했습니다.');
} catch (error) {
  console.log(error);
} finally {
  setCommentInput('');
  getComments();
}

이렇게 작성하면 Boards라는 컬렉션 안에 있는 id값에 해당하는 문서에 Comments라는 하위 컬렉션이 추가되고, 하위 컬렉션 안에는 랜덤한 id로 도큐멘트가 생성되어 requestData가 담긴다.

🔼 Comments라는 이름으로 하위 컬렉션이 생성된 것을 확인할 수 있다.

🔼 Comments 컬렉션 안에 문서(document)가 랜덤한 이름으로 생성되었다. document에는 내가 requestData로 전송한 값이 그대로 담겨있다.

하위 컬렉션의 도큐멘트 읽어오는 법

import { db } from '../fbase';
import { collection, getDocs, query, orderBy } from 'firebase/firestore';

...

const q = query(collection(db, [컬렉션명], [도큐멘트명], [하위 컬렉션명]));
// const q = query(collection(db, `컬렉션명/도큐멘트명/하위 컬렉션명`)); 이 방법도 가능하다.
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  const docObj = {
    ...doc.data(),
    id: doc.id,
};

예시

const getComments = async () => {
  const q = query(collection(db, 'Boards', id, 'Comments'), orderBy('createdAt', 'desc'));
  // const q = query(collection(db, `Boards/${id}/Comments`), orderBy('createdAt', 'desc'));
  const querySnapshot = await getDocs(q);
  const querySnapshot = await getDocs(q);
  querySnapshot.forEach((doc) => {
  const docObj = {
      ...doc.data(),
      commentId: doc.id,
    };
  setComments((comments) => [...comments, docObj]);
  });
};

🔼 이렇게 Comments 컬렉션에 담긴 도큐멘트들이 잘 받아와지는 것을 확인할 수 있다.
나는 댓글을 최신순으로 정렬하기 위해 orderBy()도 추가하여 사용했다.

하위 컬렉션의 도큐멘트 삭제하는 법

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

...

const desertRef = doc(db, [컬렉션명], [도큐멘트명], [하위컬렉션명], [삭제할 도큐멘트명]);
await deleteDoc(desertRef);

예시

const deleteComment = async (commentId: string) => {
  const confirm = window.confirm('정말로 삭제하겠습니까?');

  if (confirm) {
    const desertRef = doc(db, 'Boards', id, 'Comments', commentId);
    try {
      await deleteDoc(desertRef);
    } catch (error) {
      console.log(error);
    }
  }
};