TIL 29. 2024-02-06

이준구·2024년 2월 6일
0

TIL 순서

목록 보기
29/119
post-thumbnail

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];  
profile
개발 중~~~ 내 자신도 발전 중😂🤣

0개의 댓글

관련 채용 정보