test 임의로 추가함

src/App.js

@@ -2,6 +2,7 @@ import { useState } from "react";
 import "./App.css";
 import PaymentForm from "./components/PaymentForm/PaymentForm";
 import Expenses from "./components/Payments/Expenses";
+import ExampleComponent from "./components/Payments/Test"
 
 function App() {
 	const [expenses, setExpenses] = useState([
@@ -22,15 +23,32 @@ function App() {
 				amount: data.price,
 				date: new Date(data.today),
 			},
+      ...expenses
 		]);
 	};
 
+  const deleteExpenseItem = (index) => {
+    //확인용
+    //console.log(id);
+    //1. filter
+    // const newFilteredArray = expenses.filter((item) => item.id !== id);
+    // setExpenses(newFilteredArray);
+
+    //2.slice
+    const beforeArray = expenses.slice(0, index);
+    const afterArray = expenses.slice(index+1); //끝까지는 콤마해서 또 적는 거 뒤에 생략해도된다함. 
+    setExpenses([...beforeArray, ...afterArray]);
+  }
+
 	return (
 		<>
 			<PaymentForm getPaymentFormData={getPaymentFormData} />
-			<Expenses items={expenses} />
+			<Expenses items={expenses} deleteExpenseItem={deleteExpenseItem}/>
+      <ExampleComponent/>
 		</>
 	);
 }
 
 export default App;
+
+

src/components/Payments/ExpenseItem.js

@@ -5,15 +5,19 @@ import Card from "../UI/Card";
 import "./ExpenseItem.css";
 
 const ExpenseItem = (props) => {
+	//props.id 를 가져왔잖아
 	return (
 		<Card className="expense-item">
 			<ExpenseDate date={props.date} />
 			<div className="expense-item__description">
 				<h2>{props.title}</h2>
 				<div className="expense-item__price">${props.amount}</div>
+				<button onClick={() => props.deleteExpenseItem(props.index)}>삭제하기</button>
 			</div>
 		</Card>
 	);
 };
 
 export default ExpenseItem;
+
+

src/components/Payments/Expenses.js

@@ -7,15 +7,21 @@ import "./Expenses.css";
 const Expenses = (props) => {
 	return (
 		<Card className="expenses">
-			{props.items.map((item) => (
+			{props.items.map((item, index) => (
 				<ExpenseItem
+					key={item.id}
+					id={item.id}
+					//id값 추가함
+					index={index}
 					title={item.title}
 					amount={item.amount}
 					date={item.date}
+					deleteExpenseItem={props.deleteExpenseItem}
 				/>
 			))}
 		</Card>
 	);
 };
 
 export default Expenses;
+

src/components/Payments/Test.js

@@ -0,0 +1,19 @@
+import React, { useState, useEffect } from 'react';
+
+function ExampleComponent() {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    console.log('count 값이 변경될 때마다 실행됨');
+  }, [count]); // count가 의존성 배열에 있으므로 count 값이 변경될 때만 실행됨
+
+  return (
+
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount(count + 1)}>증가</button>
+    </div>
+  );
+}
+
+export default ExampleComponent;