#17 react-todo-app : optimization

react/todo-app/src/App.js

@@ -1,12 +1,33 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import "./App.css";
 import Form from "./components/Form";
-import List from "./components/Lists";
+import Lists from "./components/Lists";
 
-export default function App() {
-  const [todoData, setTodoData] = useState([]);
+const App = () => {
+  console.log("App component");
+
+  const [todoData, setTodoData] = useState([
+    {
+      id: "1",
+      title: "공부하기",
+      completed: true,
+    },
+    {
+      id: "2",
+      title: "청소기",
+      completed: false,
+    },
+  ]);
   const [value, setValue] = useState("");
 
+  const handleClick = useCallback(
+    (id) => {
+      let newTodoData = todoData.filter((data) => data.id !== id);
+      setTodoData(newTodoData);
+    },
+    [todoData]
+  );
+
   const handleSubmit = (e) => {
     e.preventDefault();
 
@@ -27,10 +48,16 @@ export default function App() {
           <h1>할 일 목록</h1>
         </div>
 
-        <List todoData={todoData} setTodoData={setTodoData} />
+        <Lists
+          todoData={todoData}
+          setTodoData={setTodoData}
+          handleClick={handleClick}
+        />
 
         <Form value={value} setValue={setValue} handleSubmit={handleSubmit} />
       </div>
     </div>
   );
-}
+};
+
+export default App;

react/todo-app/src/components/Form.js

@@ -1,6 +1,8 @@
 import React from "react";
 
-export default function Form({ value, setValue, handleSubmit }) {
+const Form = ({ value, setValue, handleSubmit }) => {
+  console.log("Form component");
+
   const handleChange = (e) => {
     setValue(e.target.value);
   };
@@ -24,4 +26,6 @@ export default function Form({ value, setValue, handleSubmit }) {
       </form>
     </div>
   );
-}
+};
+
+export default Form;

react/todo-app/src/components/List.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function List({
+const List = ({
   id,
   title,
   completed,
@@ -8,11 +8,9 @@ export default function List({
   setTodoData,
   provided,
   snapshot,
-}) {
-  const handleClick = (id) => {
-    let newTodoData = todoData.filter((data) => data.id !== id);
-    setTodoData(newTodoData);
-  };
+  handleClick,
+}) => {
+  console.log("List component");
 
   const handleCompleteChange = (id) => {
     let newTodoData = todoData.map((data) => {
@@ -52,4 +50,6 @@ export default function List({
       </div>
     </div>
   );
-}
+};
+
+export default React.memo(List);

react/todo-app/src/components/Lists.js

@@ -2,7 +2,9 @@ import React from "react";
 import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
 import List from "./List";
 
-export default function Lists({ todoData, setTodoData }) {
+const Lists = ({ todoData, setTodoData, handleClick }) => {
+  console.log("Lists component");
+
   const handleEnd = (result) => {
     if (!result.destination) return;
 
@@ -37,6 +39,7 @@ export default function Lists({ todoData, setTodoData }) {
                       setTodoData={setTodoData}
                       provided={provided}
                       snapshot={snapshot}
+                      handleClick={handleClick}
                     />
                   )}
                 </Draggable>
@@ -48,4 +51,6 @@ export default function Lists({ todoData, setTodoData }) {
       </DragDropContext>
     </div>
   );
-}
+};
+
+export default React.memo(Lists);