simple diary : delete data

simplediary/src/App.js

@@ -47,10 +47,16 @@ const App = () => {
     setData([newItem, ...data]);
   };
 
+  const onDelete = (targetId) => {
+    alert(`${targetId}가 삭제되었습니다.`);
+    const newDiaryList = data.filter((it) => it.id !== targetId);
+    setData(newDiaryList);
+  };
+
   return (
     <div className="App">
       <DiaryEditor onCreate={onCreate} />
-      <DiaryList diaryList={data} />
+      <DiaryList onDelete={onDelete} diaryList={data} />
     </div>
   );
 };

simplediary/src/DiaryItem.js

@@ -1,4 +1,11 @@
-const DiaryItem = ({ author, content, created_date, emotion, id }) => {
+const DiaryItem = ({
+  onDelete,
+  author,
+  content,
+  created_date,
+  emotion,
+  id,
+}) => {
   return (
     <div className="DiaryItem">
       <div className="info">
@@ -9,6 +16,15 @@ const DiaryItem = ({ author, content, created_date, emotion, id }) => {
         <span className="date">{new Date(created_date).toLocaleString()}</span>
       </div>
       <div className="content">{content}</div>
+      <button
+        onClick={() => {
+          if (window.confirm(`${id}번째 일기를 삭제하시겠습니까?`)) {
+            onDelete(id);
+          }
+        }}
+      >
+        삭제하기
+      </button>
     </div>
   );
 };

simplediary/src/DiaryList.js

@@ -1,13 +1,13 @@
 import DiaryItem from "./DiaryItem";
 
-const DiaryList = ({ diaryList }) => {
+const DiaryList = ({ onDelete, diaryList }) => {
   return (
     <div className="DiaryList">
       <h2>일기 리스트</h2>
       <h4>{diaryList.length}개의 일기가 있습니다.</h4>
       <div>
         {diaryList.map((it) => (
-          <DiaryItem key={it.id} {...it} />
+          <DiaryItem key={it.id} {...it} onDelete={onDelete} />
         ))}
       </div>
     </div>