#17 react-todo-app : component separation

react/todo-app/src/App.js

@@ -1,37 +1,13 @@
 import React, { useState } from "react";
 import "./App.css";
+import Form from "./components/Form";
+import List from "./components/List";
 
 export default function App() {
   const [todoData, setTodoData] = useState([]);
   const [value, setValue] = useState("");
 
-  const btnStyle = {
-    color: "#fff",
-    border: "none",
-    padding: "5px 9px",
-    borderRadius: "50%",
-    cursor: "pointer",
-    float: "right",
-  };
-
-  const getStyle = (completed) => {
-    return {
-      padding: "10px",
-      borderBottom: "1px #ccc dotted",
-      textDecoration: completed ? "line-through" : "none",
-    };
-  };
-
-  const handleClick = (id) => {
-    let newTodoData = todoData.filter((data) => data.id !== id);
-    setTodoData(newTodoData);
-  };
-
-  const handleChange = (e) => {
-    setValue(e.target.value);
-  };
-
-  const handlkeSubmit = (e) => {
+  const handleSubmit = (e) => {
     e.preventDefault();
 
     let newTodo = {
@@ -44,17 +20,6 @@ export default function App() {
     setValue("");
   };
 
-  const handleCompleteChange = (id) => {
-    let newTodoData = todoData.map((data) => {
-      if (data.id === id) {
-        data.completed = !data.completed;
-      }
-      return data;
-    });
-
-    setTodoData(newTodoData);
-  };
-
   return (
     <div className="container">
       <div className="todoBlock">
@@ -62,36 +27,9 @@ export default function App() {
           <h1>할 일 목록</h1>
         </div>
 
-        {todoData.map((data) => (
-          <div style={getStyle(data.completed)} key={data.id}>
-            <input
-              type={"checkbox"}
-              defaultChecked={false}
-              onChange={() => handleCompleteChange(data.id)}
-            />
-            {data.title}
-            <button style={btnStyle} onClick={() => handleClick(data.id)}>
-              x
-            </button>
-          </div>
-        ))}
+        <List todoData={todoData} setTodoData={setTodoData} />
 
-        <form style={{ display: "flex" }} onSubmit={handlkeSubmit}>
-          <input
-            type={"text"}
-            name={"value"}
-            style={{ flex: "10", padding: "5px" }}
-            placeholder={"해야 할 일을 입력하세요."}
-            value={value}
-            onChange={handleChange}
-          />
-          <input
-            type={"submit"}
-            value={"입력"}
-            className={"btn"}
-            style={{ flex: "1" }}
-          />
-        </form>
+        <Form value={value} setValue={setValue} handleSubmit={handleSubmit} />
       </div>
     </div>
   );

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

@@ -0,0 +1,28 @@
+import React from "react";
+
+export default function Form({ value, setValue, handleSubmit }) {
+  const handleChange = (e) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <div>
+      <form style={{ display: "flex" }} onSubmit={handleSubmit}>
+        <input
+          type={"text"}
+          name={"value"}
+          style={{ flex: "10", padding: "5px" }}
+          placeholder={"해야 할 일을 입력하세요."}
+          value={value}
+          onChange={handleChange}
+        />
+        <input
+          type={"submit"}
+          value={"입력"}
+          className={"btn"}
+          style={{ flex: "1" }}
+        />
+      </form>
+    </div>
+  );
+}

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

@@ -0,0 +1,54 @@
+import React from "react";
+
+export default function List({ todoData, setTodoData }) {
+  const btnStyle = {
+    color: "#fff",
+    border: "none",
+    padding: "5px 9px",
+    borderRadius: "50%",
+    cursor: "pointer",
+    float: "right",
+  };
+
+  const getStyle = (completed) => {
+    return {
+      padding: "10px",
+      borderBottom: "1px #ccc dotted",
+      textDecoration: completed ? "line-through" : "none",
+    };
+  };
+
+  const handleClick = (id) => {
+    let newTodoData = todoData.filter((data) => data.id !== id);
+    setTodoData(newTodoData);
+  };
+
+  const handleCompleteChange = (id) => {
+    let newTodoData = todoData.map((data) => {
+      if (data.id === id) {
+        data.completed = !data.completed;
+      }
+      return data;
+    });
+
+    setTodoData(newTodoData);
+  };
+
+  return (
+    <div>
+      {todoData.map((data) => (
+        <div style={getStyle(data.completed)} key={data.id}>
+          <input
+            type={"checkbox"}
+            defaultChecked={false}
+            onChange={() => handleCompleteChange(data.id)}
+          />
+          {data.title}
+          <button style={btnStyle} onClick={() => handleClick(data.id)}>
+            x
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}