[마이머니앱] 삭제하기

https://cloud.google.com/firestore/docs/query-data/order-limit-data?hl=ko

데이터 순서 지정 및 제한  |  Firestore  |  Google Cloud

 

---

 

 

useFireStore.js

 // doc 삭제

  const deleteDocument = async (id) => {

    dispatch({ type: "IS_PENDING" });

    try {

      await ref.doc(id).delete();

      dispatchIfNotCancelled({ type: "DELETE_DOCUMENT" });

    } catch (err) {

      dispatchIfNotCancelled({ type: "ERROR", payload: "삭제할 수 없습니다." });

    }

  };

  useEffect(() => {

    setIsCancelled(false);

    return () => setIsCancelled(true);

  }, []);

 

리듀서 추가 

    case "DELETE_DOCUMENT":

      return { isPending: false, document: null, success: true, errror: null };

 

 

TransactionList.jsx

import { useFirestore } from "../../hooks/useFireStore";

import styles from "./Home.module.css";

const TransactionList = ({ transactions }) => {

  const { deleteDocument } = useFirestore("transactions"); // 삭제 메서드 가져오기

  return (

    <div className={styles.transactions}>

      {transactions.map((transaction) => (

        <li key={transaction.id}>

          <p className={styles.name}>{transaction.name}</p>

          <p className={styles.amount}>{transaction.amount}원</p>

          <button onClick={() => deleteDocument(transaction.id)}>X</button>

        </li>

      ))}

    </div>

  );

};

export default TransactionList;

 

 

 

설탕 삭제해봤다.