[실습]TodoList

import React, { useState } from "react";
import "./App.css";

function App() {
  const [todo, setTodo] = useState([
    { id: 1, title: "과제끝내기", body: "todoList 만들기", isDone: false },
  ]);

  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");

  const titleChangeHandler = (event) => {
    setTitle(event.target.value);
  };

  const bodyChangeHandler = (event) => {
    setBody(event.target.value);
  };

  const ClickAddHandler = () => {
    const newTodo = {
      id: todo.length + 1,
      title,
      body,
      isDone: false,
    };

    setTodo([...todo, newTodo]);

    setTitle("");
    setBody("");
  };

  const ClickDeleteHandler = (id) => {
    const newTodo = todo.filter(function (to) {
      return to.id !== id;
    });
    setTodo(newTodo);
  };

  return (
    <div className="App">
      <div className="input-space">
        제목 : <input value={title} onChange={titleChangeHandler} />
        내용 : <input value={body} onChange={bodyChangeHandler} />
        <button onClick={ClickAddHandler}>추가</button>
      </div>
      <div className="working-space">
        Working
        <div className="lists">
          {todo.map((item) => {
            return (
              <Todo
                key={item.id}
                item={item}
                ClickDeleteHandler={ClickDeleteHandler}
              />
            );
          })}
        </div>
      </div>
      <div className="done-space">완료</div>
    </div>
  );
}
const Todo = ({ item, ClickDeleteHandler }) => {
  return (
    <div key={item.id}>
      {item.title} - {item.body}
      <button onClick={() => ClickDeleteHandler(item.id)}>x</button>
    </div>
  );
};
export default App;