리액트 todoList 체크박스 수정, 삭제

체크박스 수정

 

 

데이터가 들어있는 todo State이다.

 

 

 

 

체크박스를 눌렀을 때, 변화가 생기게 하려면 위의 값에서 isDone값만 수정해야 한다.

 

 

 

 

즉 기존의 todos 배열을 수정해야 하기에, 우선 onUpdate 함수를 생성한다. 또한 어떤 todo가 체크되었는지 확인해야 하기에 id 값을 받아와야 한다.

 

id를 받아오기 위해 매개변수 이름을 targetId로 지정한다. 이후 상태변화 함수인 setTodos를 호출하고, 받아온 id에 해당하는 todo만 수정하면 된다.

 

map 함수를 통해 todos를 순회시키고, 현재 todo.id와 매개변수로 받아온 id가 같을 때만 수정하도록 한다. 이후 해당 함수를 자식컴포넌트로 전달한다.

 

 

 

 

 

자식 컴포넌트에서 구조분해할당을 통해 해당 함수를 받아오고, 사용하기 위한 핸들러를 만들고 적용시킨다.

 

 

 

 

이렇게 되면, 체크박스가 클릭되었을 때, onUpdate함수로 id값이 보내지고, isDone값이 변화하면서 체크박스 표시가 바뀌게 된다.

 

 

 

 

참고로 삼항연산자를 사용하면 onUpdate함수를 더 간략하게 만들 수 있다.

 

 

 

 

 

todo  삭제

 

위에서 만든 onUpdate함수와 비슷하다. targetId와 일치하는 id를 가진 배열의 요소만 제거하고 새로운 배열 요소를 만들어서 넘겨주면 된다. 즉 filter 메서드를 사용한다.

 

 

위의 코드를 해석하면 todos의 요소를 하나하나 돌리면서 todo.id와 전달되는 id가 일치 않는 값만 반환하는 것이다.

 

즉 0번이 전달되면 0번에 해당하지 않는 값만 반환되기에 자연스레 0번은 삭제될 것이다.

 

 

 

 

똑같이 적용하면 삭제버튼을 눌렀을 때, 잘 적용되는 것을 확인할 수 있다.