SECTION: 1번 문제
todos.map((item) => (
return <item
todo={item}
onDeleteTodoItem={onDeleteTodoItem}
onToggleTodoItem={onToggleTodoItem}
></item>
))
SECTION: 2-1번 문제
1.해당 id를 제외한 값들을 fitler를 사용하여 구별
2. 값을 setState에 저장
1. 첫번 째 표현
//삭제 id를 제외한 값 찾기
const FindDelete = todos.filter((item) => (item.id !== id ? true : false));
//setState에 저장
setTodos(FindDelete);
2. 두번 째 표현
setTodos((prev) => {
return prev.filter((item) => (item.id !== id ? true : false));
});
SECTION: 2-2번 문제
TODO: 투두 리스트 completed(완료) 상태를 토글
1. 이전 배열의 순서를 유지
setTodos((prev) => {
return prev.map((item) =>
item.id === id ? { ...item, completed: !item.completed } : item
);
});
2. 상태 변화된 값을 앞으로 이동
//find: 해당 id값을 객체로 출력 filter: 배열로 출력하여 retrun할 때 spread 연산자를 사용해야한다.
const findNext = todos.find((item) => (item.id === id ? true : false));
findNext.completed = !findNext.completed; //해당 객체의 상태 반전
setTodos((prev) => {
const filterPrev = prev.filter((item) => (item.id !== id ? true : false)); // 해당 되지 않는 나머지를 배열로 출력
return [findNext, ...filterPrev];