개인 프로젝트-리액트로 todolist만들기-삭제 기능

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

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

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

4. 삭제기능

 

 

const handleRemoveTodo = () => {
    alert('정말 삭제하시겠습니까?')
    removeTodo(todo.id);
  };

remainingTodos라는 새로운 배열 생성 : filter메서드 활용해서 todo.id!==selectedId인 요소들을 거름

 

const handleRemoveTodo = (selectedId) => {
    const remainingTodos = todos.filter((todo) => todo.id !== selectedId);
    setTodos(remainingTodos);
    saveToLocalStorage(remainingTodos);
  };

각각 !todo.isDone일때 완료, 삭제 / todo.isDone일때는 취소와 삭제를 구현

{!todo.isDone && <button onClick={handleMarkAsDone}>완료</button>}
      {!todo.isDone && <button onClick={handleRemoveTodo}>삭제</button>}
      {todo.isDone && <button onClick={handleCancelTodo}>취소</button>}
      {todo.isDone && <button onClick={handleRemoveTodo}>삭제</button>}