Firebase Firestore 활용 - 데이터 삭제하기 (React)

이전 포스팅 확인하기 ⬇️

Firebase Firestore 데이터 불러오기

---

Firestore에서 데이터를 삭제하는 방법은 여러 가지가 있습니다.
기본적으로 문서 ID를 사용해 삭제할 수도 있지만, 특정 조건을 만족하는 데이터를 찾아 삭제할 수도 있습니다.

이번 글에서는 Firestore에서 데이터를 삭제하는 다양한 방법을 다뤄보겠습니다.

1. 문서 ID를 이용한 삭제 (deleteDoc)

Firestore에서는 특정 문서를 삭제할 때 문서 ID를 이용하는 것이 가장 일반적입니다.
문서 ID는 Firestore에서 각 문서를 식별하는 고유한 값이므로, 이를 이용하면 정확한 데이터를 삭제할 수 있습니다.

✅ 문서 ID로 삭제하는 코드

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

const deleteItemById = async (itemId) => {
  try {
    const itemRef = doc(db, "items", itemId); // 삭제할 문서 참조
    await deleteDoc(itemRef); // 문서 삭제 실행

    console.log("✅ 문서 삭제 완료:", itemId);
  } catch (error) {
    console.error("❌ 문서 삭제 실패:", error);
  }
};

✅ doc(db, "컬렉션명", "문서ID")를 사용하여 삭제할 문서를 참조
✅ deleteDoc()을 사용해 문서를 Firestore에서 삭제

문서 ID를 직접 알고 있을 때 사용하면 가장 빠르고 효율적인 삭제 방법입니다.

2. 특정 필드 값과 일치하는 문서 삭제하기 (where 절 사용)

문서 ID를 모를 때는, 특정 필드 값이 특정 조건과 일치하는 문서를 찾아 삭제할 수 있습니다.
이때 where() 절과 getDocs()를 활용하여 해당하는 모든 문서를 가져온 후 삭제하면 됩니다.

✅ 특정 필드 값과 일치하는 데이터 삭제
예를 들어, "category"가 "과일"인 모든 데이터를 삭제하고 싶다면:

import { db } from "./firebaseConfig";
import { collection, query, where, getDocs, deleteDoc } from "firebase/firestore";

const deleteItemsByCategory = async (categoryName) => {
  try {
    const q = query(collection(db, "items"), where("category", "==", categoryName));
    const querySnapshot = await getDocs(q);

    querySnapshot.forEach(async (docSnapshot) => {
      await deleteDoc(doc(db, "items", docSnapshot.id));
    });

    console.log(`✅ '${categoryName}' 카테고리의 모든 문서 삭제 완료`);
  } catch (error) {
    console.error("❌ 문서 삭제 실패:", error);
  }
};

// 사용 예시
deleteItemsByCategory("과일");

✅ where("category", "==", categoryName)을 사용해 특정 필드 값과 일치하는 문서 찾기
✅ getDocs()를 사용해 필터링된 문서 가져오기
✅ forEach() 문을 사용해 모든 해당 문서 삭제

특정 조건을 만족하는 여러 개의 문서를 삭제할 때 유용합니다.

3. 특정 필드 값이 여러 조건 중 하나와 일치하는 문서 삭제하기

예를 들어 "category"가 "야채" 또는 "과일"인 모든 데이터를 삭제하고 싶다면:
where() 절을 여러 개 사용하면 됩니다.

✅ 여러 개의 특정 필드 값을 가진 문서 삭제

import { db } from "./firebaseConfig";
import { collection, query, where, getDocs, deleteDoc } from "firebase/firestore";

const deleteItemsByMultipleCategories = async (categories) => {
  try {
    const q = query(collection(db, "items"), where("category", "in", categories));
    const querySnapshot = await getDocs(q);

    querySnapshot.forEach(async (docSnapshot) => {
      await deleteDoc(doc(db, "items", docSnapshot.id));
    });

    console.log(`✅ ${categories.join(", ")} 카테고리의 모든 문서 삭제 완료`);
  } catch (error) {
    console.error("❌ 문서 삭제 실패:", error);
  }
};

// 사용 예시
deleteItemsByMultipleCategories(["야채", "과일"]);

✅ where("category", "in", ["야채", "과일"])을 사용하여 여러 조건을 만족하는 데이터 검색
✅ getDocs()로 문서를 가져와 deleteDoc()으로 삭제

여러 개의 특정 필드 값을 가진 데이터를 한 번에 삭제할 때 유용합니다.

4. 특정 필드 값이 일정 조건을 만족하는 문서 삭제하기

예를 들어, "price"가 5000 이하인 문서를 모두 삭제하고 싶다면:

✅ 특정 값 이하 또는 이상인 문서 삭제

import { db } from "./firebaseConfig";
import { collection, query, where, getDocs, deleteDoc } from "firebase/firestore";

const deleteItemsByPrice = async (maxPrice) => {
  try {
    const q = query(collection(db, "items"), where("price", "<=", maxPrice));
    const querySnapshot = await getDocs(q);

    querySnapshot.forEach(async (docSnapshot) => {
      await deleteDoc(doc(db, "items", docSnapshot.id));
    });

    console.log(`✅ 가격이 ${maxPrice}원 이하인 모든 문서 삭제 완료`);
  } catch (error) {
    console.error("❌ 문서 삭제 실패:", error);
  }
};

// 사용 예시
deleteItemsByPrice(5000);

✅ where("price", "<=", maxPrice)를 사용하여 가격이 특정 값 이하인 데이터 검색
✅ 가져온 문서를 deleteDoc()으로 삭제

숫자 필드에 대해 특정 범위의 데이터를 삭제할 때 유용합니다.

---

이후 포스팅에서는 파이어스토어에 데이터를 저장하거나 삭제할 때, 해당 변경사항을 즉시 감지하고 반영할 수 있는 함수 onSnapshot에 대해 다뤄보도록 하겠습니다.