TIL 29. 2024-02-06

SECTION: 1번 문제

• TODO: 투두 리스트 렌더링
  
  

1. 데이터 찾기
2. 전체 데이터의 배열을 map을 사용하여 반복처리

 todos.map((item) => (
     return  <item
              todo={item}
              onDeleteTodoItem={onDeleteTodoItem}
              onToggleTodoItem={onToggleTodoItem}
            ></item>
          ))

SECTION: 2-1번 문제

• TODO: 투두 리스트 삭제

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];