리액트 투두리스트 체크박스

코드를 보니, 체크 상태를 표현하는 state를 만들어 각 항목이 체크되었는지 관리하도록 수정해야 할 것 같습니다. 또한, map 함수에서 사용하는 key의 값을 고유하게 유지해야합니다. map의 index를 key로 사용하는 것은 권장되지 않습니다. 이는 단순히 배열의 순서만 의미하기 때문에, 배열에 변화가 생기면 원치 않은 결과를 초래할 수 있습니다. 다음은 각 항목에 대한 체크 상태를 관리하는 예제 코드입니다: ```javascript import { React, useCallback, useContext } from 'react'; import todoListFrame from "./TodoListFrame.module.css"; import { ListSetContext } from '../context/ListSetContext'; function TodoListFrame() { const {todoList, setTodoList} = useContext(ListSetContext); const onDelete = useCallback((id)=>{ setTodoList((prev)=>prev.filter((item)=>item.id !== id)) },[]); const onToggle = useCallback((id)=>{ setTodoList( todoList.map(item => item.id === id ? {...item, checked: !item.checked} : item, ), ); },[todoList]); return ( <div className={todoListFrame.listFrame}> {todoList.map(({id,content,checked})=>{ return( <li key={id} className={todoListFrame.listItem}> <input type='checkbox' checked={checked} onChange={() => onToggle(id)} className={todoListFrame.checkBox}/> {content} <button className={todoListFrame.delBtn} onClick={()=> onDelete(id)}>❌</button> </li> ) })} </div> ); } export default TodoListFrame; ``` 위의 코드에서는 todoList 각각의 아이템에 고유한 id와 checked라는 state가 추가되었습니다. 이제 체크박스는 항목별로 독립적으로 작동하게 됩니다. 또한, 삭제 기능은 고유한 id를 이용해 특정 항목을 삭제하도록 수정되었습니다. (tag기반으로 id를 생성하는 방법이나 다른 고유id 생성 라이브러리를 사용하면 좋습니다.)