#17 react-todo-app : class component -> hooks

react/todo-app/src/App.js

@@ -1,13 +1,11 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import "./App.css";
 
-export default class App extends Component {
-  state = {
-    todoData: [],
-    value: "",
-  };
+export default function App() {
+  const [todoData, setTodoData] = useState([]);
+  const [value, setValue] = useState("");
 
-  btnStyle = {
+  const btnStyle = {
     color: "#fff",
     border: "none",
     padding: "5px 9px",
@@ -16,7 +14,7 @@ export default class App extends Component {
     float: "right",
   };
 
-  getStyle = (completed) => {
+  const getStyle = (completed) => {
     return {
       padding: "10px",
       borderBottom: "1px #ccc dotted",
@@ -24,81 +22,77 @@ export default class App extends Component {
     };
   };
 
-  handleClick = (id) => {
-    let newTodoData = this.state.todoData.filter((data) => data.id !== id);
-    this.setState({ todoData: newTodoData });
+  const handleClick = (id) => {
+    let newTodoData = todoData.filter((data) => data.id !== id);
+    setTodoData(newTodoData);
   };
 
-  handleChange = (e) => {
-    this.setState({ value: e.target.value });
+  const handleChange = (e) => {
+    setValue(e.target.value);
   };
 
-  handlkeSubmit = (e) => {
+  const handlkeSubmit = (e) => {
     e.preventDefault();
 
     let newTodo = {
       id: Date.now(),
-      title: this.state.value,
+      title: value,
       completed: false,
     };
 
-    this.setState({ todoData: [...this.state.todoData, newTodo], value: "" });
+    setTodoData((prev) => [...prev, newTodo]);
+    setValue("");
   };
 
-  handleCompleteChange = (id) => {
-    let newTodoData = this.state.todoData.map((data) => {
+  const handleCompleteChange = (id) => {
+    let newTodoData = todoData.map((data) => {
       if (data.id === id) {
         data.completed = !data.completed;
       }
       return data;
     });
 
-    this.setState({ todoData: newTodoData });
+    setTodoData(newTodoData);
   };
 
-  render() {
-    return (
-      <div className="container">
-        <div className="todoBlock">
-          <div className="title">
-            <h1>할 일 목록</h1>
-          </div>
-
-          {this.state.todoData.map((data) => (
-            <div style={this.getStyle(data.completed)} key={data.id}>
-              <input
-                type={"checkbox"}
-                defaultChecked={false}
-                onChange={() => this.handleCompleteChange(data.id)}
-              />
-              {data.title}
-              <button
-                style={this.btnStyle}
-                onClick={() => this.handleClick(data.id)}
-              >
-                x
-              </button>
-            </div>
-          ))}
-
-          <form style={{ display: "flex" }} onSubmit={this.handlkeSubmit}>
-            <input
-              type={"text"}
-              name={"value"}
-              style={{ flex: "10", padding: "5px" }}
-              placeholder={"해야 할 일을 입력하세요."}
-              value={this.state.value}
-              onChange={this.handleChange}
-            />
-            <input
-              type={"submit"}
-              value={"입력"}
-              className={"btn"}
-              style={{ flex: "1" }}
-            />
-          </form>
+  return (
+    <div className="container">
+      <div className="todoBlock">
+        <div className="title">
+          <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>
+        ))}
+
+        <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>
       </div>
-    );
-  }
+    </div>
+  );
 }