simple diary - save data

simplediary/src/App.js

@@ -1,36 +1,56 @@
+import React, { useRef, useState } from "react";
 import "./App.css";
 import DiaryEditor from "./DiaryEditor";
 import DiaryList from "./DiaryList";
 
-const dummyList = [
+// const dummyList = [
-  {
+//   {
-    id: 1,
+//     id: 1,
-    author: "kim",
+//     author: "kim",
-    content: "hihi",
+//     content: "hihi",
-    emotion: 5,
+//     emotion: 5,
-    created_date: new Date().getTime(),
+//     created_date: new Date().getTime(),
-  },
+//   },
-  {
+//   {
-    id: 2,
+//     id: 2,
-    author: "lee",
+//     author: "lee",
-    content: "hihi",
+//     content: "hihi",
-    emotion: 2,
+//     emotion: 2,
-    created_date: new Date().getTime(),
+//     created_date: new Date().getTime(),
-  },
+//   },
-  {
+//   {
-    id: 3,
+//     id: 3,
-    author: "park",
+//     author: "park",
-    content: "hihi",
+//     content: "hihi",
-    emotion: 4,
+//     emotion: 4,
-    created_date: new Date().getTime(),
+//     created_date: new Date().getTime(),
-  },
+//   },
-];
+// ];
 
 const App = () => {
+  const [data, setData] = useState([]);
+
+  const dataId = useRef(0);
+
+  const onCreate = (author, content, emotion) => {
+    const created_date = new Date().getTime();
+
+    const newItem = {
+      author,
+      content,
+      emotion,
+      created_date,
+      id: dataId.current,
+    };
+    dataId.current += 1;
+
+    setData([newItem, ...data]);
+  };
+
   return (
     <div className="App">
-      <DiaryEditor />
+      <DiaryEditor onCreate={onCreate} />
-      <DiaryList diaryList={dummyList} />
+      <DiaryList diaryList={data} />
     </div>
   );
 };

simplediary/src/DiaryEditor.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react";
 
-const DiaryEditor = () => {
+const DiaryEditor = ({ onCreate }) => {
   const authorInput = useRef();
   const contentInput = useRef();
 
@@ -28,7 +28,13 @@ const DiaryEditor = () => {
       return;
     }
 
+    onCreate(state.author, state.content, state.emotion);
     alert("저장 성공");
+    setState({
+      author: "",
+      content: "",
+      emotion: 5,
+    });
   };
 
   return (