나만의 메뉴 구현 (22.11.11 TIL)

이번 주 퀘스트 과제에 있던 나만의 메뉴 구현하기. 투두리스트로 나만의 메뉴를 만들어 보았다. 강의반복과제와 유사해서 마치 복습을 하는 듯한 바이브로..^^ 거기에 삭제와 체크박스 기능 추가!

삭제 기능을 구현할 때는 filter() 메서드를 사용해서 아이디값이 다른 것만 찾아서 setTasks() 로 새로운 배열을 만들어 상태관리를 따로 해주었다.

const deleteTask = (id) => {
    setTasks(tasks.filter((task) => task.id !== id));
  };

 

그럼 체크박스의 상태를 false 와 true 로 바꿔줄 때는 어떻게 해야 할까?

const completeTask = (id) => {
    setTasks(tasks.map((task) => {
      if (task.id !== id) {
        return { ...task };
      }

      const toggled = {
        id: task.id,
        title: task.title,
        completed: !task.completed,
      };

      return toggled;
    }));
  };

id 값이 다른 경우를 모두 찾아 새로운 배열에 넣어주고, 만약 id 가 같으면 새로운 객체를 만들어서 그 객체를 반환해주면 된다. 원래는 이 함수도 deleteTask 처럼 filter 를 사용해 해보려다가 아직은 리액트와 자바스크립트가 익숙지 않아서 최대한 코드를 읽기 쉬운 방향으로 작업하였다. 

이 패턴이 익숙해지면 다른 방향으로 다시 리팩토링을 해서 이 글에 추가하는 것으로..!!