TIL24-03 리액트 Todo List 완료 기능

• Todo List 만들는 과정에서 추가 기능과 삭제 기능은 손쉽게 진행하였으나 완료 기능에서 막혀 시간을 많이 허비했다.

• 문제 코드
  리스트 추가시 false값을 기본적으로 주었고, 완료 버튼을 눌렀을 때 그 값을 true로 변경하면 할일이 완료가 되며 완료된 할일 리스트로 넘어 갈 수 있게 구성하려 하였다. 하지만 밑에처럼 코드를 짜니 기존 리스트는 사라지고, isDone=true 이 부분만 객체에 남게 되어, 구현이 되지 않았다.

const doneButtonHandler = (id) => {
        const doneLits = list.map((x) => {
            if (x.id === id) {
                return x.isDone = true; //문제가 된 부분
        });
        setList(doneLits);
    };

• 문제 해결
  isDone 을 true로 바꾸면서 기존 객체 값에 넣어주어야 해결이 된다.

    const doneButtonHandler = (id) => {
        const doneLits = list.map((x) => {
            if (x.id === id) {
                return {
                    ...x,
                    isDone: !x.isDone, //스프레트 문법으로 기존 리스트를 가져오오면서, 
                                      //isDone값을 변경해주었고, 아니면 그대로 객체값을 유지해주었다.
                };
            } else {
                return { ...x };
            }
        });
        setList(doneLits);
    };