개인 프로젝트- 리액트로 todolist만들기-완료되지 않은 할 일 다시 진행중으로 보내기

1. input에 제목과 내용을 넣고 추가하기를 누르면 working에 추가되기

2. working에 있는 todo 완료 누르면 done으로 이동

3. done에 있는 todo 취소 누르면 working으로 이동

4. 삭제기능

 

내부적으로 cancelTodo 함수를 호출하는 handleCancelTodo 함수 호출

const handleCancelTodo=()=>{
    cancelTodo(todo.id);
  }

handleCancelTodo 함수의 매개변수로 selectedId를 전달한다.

todo.map을 통해 todos 배열을 순회하며 각 요소를 변환하여 새로운 배열을 만든다. 

if 조건문을 사용하여 todo.id가 selectedId와 일치하는지 확인하고 일치하며 해당 할 일의 isDone 속성을 false로 변경한다.

const handleCancelTodo = (selectedId) => {
    const updatedTodos = todos.map((todo) => {
      if (todo.id === selectedId) {
        return { ...todo, isDone: false };
      }
      return todo;
    });
    setTodos(updatedTodos);
    saveToLocalStorage(updatedTodos);
  };