[쿠킹레시피] 파이어 베이스 연결하기 (레시피 삭제하기)

 

https://fonts.google.com/icons?subset=korean&noto.script=Kore&icon.query=delete

Material Symbols and Icons - Google Fonts

 

 

RecipeList.jsx

import React, { useContext } from "react";
import "./RecipeList.css";
import { Link } from "react-router-dom";
import { ThemeContext } from "../context/ThemeContext";
import { firedb } from "../firebase/config";
import Trashcan from "../assets/delete-icon.svg";

export const RecipeList = ({ recipes }) => {
  const { mode } = useContext(ThemeContext);
  if (recipes.length === 0) {
    return <div className="error">검색된 레시피가 없습니다.</div>;
  }

  //파이어베이스로 db삭제하기
  const handleClick = (id) => {
    firedb.collection("recipes").doc(id).delete();
  };

  return (
    <div className="recipe-list">
      {recipes.map((recipe) => (
        <div key={recipe.id} className={`card ${mode}`}>
          <h3>{recipe.title}</h3>
          <p>{recipe.cookingTime} to make.</p>
          <div>{recipe.method.substring(0, 100)}...</div>
          <Link to={`/recipes/${recipe.id}`}>요리하기</Link>
          <img
            src={Trashcan}
            alt=""
            className="delete"
            onClick={() => handleClick(recipe.id)}
          />
        </div>
      ))}
    </div>
  );
};

 

 

RecipeList.css 도 추가

.delete {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  filter: invert(60%);
}

 

 

오른쪽 위 휴지통 모양 클릭하면  삭제는 되는데, 새로고침해야 확인이된다. 

 

 

 

 

 

https://firebase.google.com/docs/firestore/query-data/listen?hl=ko

Cloud Firestore로 실시간 업데이트 가져오기  |  Firebase

 

onSapshot으로 변경이 일어나면 업데이트가 자동으로 되도록 한다.

 

DB가 업데이트되면 실시간으로 업데이트 시켜주는거임

 

Home.jsx

get.then 지우고 onSnapshot으로 바꿈

 

db데이터를 다른 페이지 갔을 경우에는 안가져와도됨 

이때 에러처리는 두번째 매개변수로 에러함수를 실행하므로 화살표 함수로 처리.

 

useEffect(() => {
    //파이어 스토어에서 데이터 가져오기
    setIsPending(true); //데이터 가져오기 작업시작(로딩중)
    const unsub = firedb
      .collection("recipes") //컬렉션에서
      .onSnapshot(
        (snapshot) => {
          // console.log(snapshot.docs[0].data());
          //가져온 데이터를 snapshot이라한다.
          if (snapshot.empty) {
            //데이터가 없을 때
            setError("레시피가 없습니다."); //에러에 레시피 없음을 출력
            setIsPending(false); //가져오기 종료
          } else {
            // 데이터가 있을 경우
            let results = []; //빈 배열 생성
            snapshot.docs.forEach((doc) => {
              //반복문으로 결과를 배열에 넣는다.
              results.push({ id: doc.id, ...doc.data() });
            });
            setData(results);
            setIsPending(false); // 작업 종료
          }
        },
        (error) => {
          //에러 발생 시
          setError(error.message); //에러 메세지 출력
          setIsPending(false); //작업 종료
        }
      );

    return () => unsub(); //useEffect가 종료될 때 즉, 다른 페이지로 이동했을 시
  }, []);

 

 

 

 

테스트 해보기 

고구마 맛탕 삭제할거임

 

새로고침하지 않아도 바로 반영됨을 확인할 수 있다.