Todo List 만들기 - 2

- React Todo List 만들기

---

  const clickDeleteBtnHandler = (id) => {
    const updatedTodos = todos.filter((todo) => todo.id !== id);
    setTodos(updatedTodos);
  };

  const clickCompleteBtnHandler = (id) => {
    const updatedTodos = todos.map((todo) =>
      todo.id === id ? { ...todo, isDone: true } : todo,
    );
    setTodos(updatedTodos);
  };

  const clickCancelBtnHandler = (id) => {
    const updatedTodos = todos.map((todo) =>
      todo.id === id ? { ...todo, isDone: false } : todo,
    );
    setTodos(updatedTodos);
  };

클릭 했을 때 발생하는 이벤트 핸들러를 만들어준다. filter 를 사용해서 해당 id 와 일치하지 않는 todo를 새로운 배열로 만들어 업데이트된 todo로 설정하고, map 을 사용해서 해당 ID와 일치하는 todo는 복제하고 isDone 속성만 변경한 후, 나머지는 그대로 유지한 새로운 배열을 만들어 업데이트된 할 일 목록으로 설정한다. 일치하지 않는 목록은 그대로 유지한다.

import Button from "react-bootstrap/Button";

const AddButton = ({ clickAddBtnHandler }) => {
  return (
    <div className="todo-add-button">
      <Button variant="success" onClick={clickAddBtnHandler}
      className="add-button">
        추가하기
      </Button>
    </div>
  );
  
};

export default AddButton;

import Button from "react-bootstrap/Button";

const AddTodoList = ({ item, deleteFunc, completeFunc, cancelFunc }) => {
  return (
    <div key={item.id} className="todo-card">
      <div className="text-box">
        <h3>{item.title}</h3>
        <br />
        <h6>{item.content}</h6>
      </div>
      <div className="todo-btn-list">
        <Button variant="danger" onClick={() => deleteFunc(item.id)}
        className="todo-button">
          삭제하기
        </Button>
        {item.isDone ? (
        <Button variant="warning" onClick={() => cancelFunc(item.id)}
        className="todo-button">
          취소하기
        </Button>
      ) : (
        <Button variant="primary" onClick={() => completeFunc(item.id)}
        className="todo-button">
          완료하기
        </Button>
      )}
      </div>
    </div>
  );
};

export default AddTodoList;

버튼을 눌렀을 때 리턴되는 내용을 컴포넌트로 따로 분류했다.