diff --git a/simplediary/src/App.js b/simplediary/src/App.js index 963c727a..8c0379b2 100644 --- a/simplediary/src/App.js +++ b/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 (
- +
); }; diff --git a/simplediary/src/DiaryItem.js b/simplediary/src/DiaryItem.js index b7c8d37e..c194a2e5 100644 --- a/simplediary/src/DiaryItem.js +++ b/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 (
@@ -9,6 +16,15 @@ const DiaryItem = ({ author, content, created_date, emotion, id }) => { {new Date(created_date).toLocaleString()}
{content}
+
); }; diff --git a/simplediary/src/DiaryList.js b/simplediary/src/DiaryList.js index 8ec4aa56..ece4f3f5 100644 --- a/simplediary/src/DiaryList.js +++ b/simplediary/src/DiaryList.js @@ -1,13 +1,13 @@ import DiaryItem from "./DiaryItem"; -const DiaryList = ({ diaryList }) => { +const DiaryList = ({ onDelete, diaryList }) => { return (

일기 리스트

{diaryList.length}개의 일기가 있습니다.

{diaryList.map((it) => ( - + ))}