TIL 22. 2024-01-26

변경 전)

//버튼 클릭 시 고유 id 값을 전달 받아 기존 배열에서의 해당 id값을 가진 배열 상태 변경
const ToggleButtonHandler = (id) => {
setTodo((prev) => (
prev.map((todo) => 
todo.id === id ? {...todo, isDone: !todo.isDone} : todo)))
  
//문제점: 기존 배열 위치에서 상태만 변경되어 변경된 값의 위치가 중간에 나타나는 현상이 발생

변경 후)

1. 변경 과정

//버튼 클릭 시 고유 id 값을 전달 받아 변경된 값을 배열 마지막 위치에 삽입
const ToggleButtonHandler = (id) => {
  
const filterNext = todos.filter((item) => item.id === id ? [{...item, isDone : !item.isDone}] : false)  
    
  setTodo((prev) => (
       [...prev, filterNext[0]]
        ))
  
  console.log(typeof filterNext, filterNext[0].isDone)
  
//문제점:
// 1. 상태 변화가 이루어지지 않는다.  
// 원인) filter 함수는 조건에 만족했을 경우의 배열을 return하는 기능이다.
// but 현재 filter 구조: 조건에 충족했을 경우 값을 변경시켜 return을 시도하다 문제가 발생한 것이다.
// 해결방법: 두가지로 쪼개기 ==> 조건에 해당되는 배열을 생성/ 상태 변화 시키기
    
// 2. 기존의 값이 유지된 채로 새로운 값이 출력되는 문제가 발생했다.
// 이유) prev: 상태 변화가 이루어진 값을 포함한 상태 + 상태변화가 이루어진 값  =  n개로 출력
// 객체의 key는 중복될 수 없으므로 이후의 들어온 isDone의 상태로 값이 바뀐다.
// 해결방법: 조건에 만족하는 배열 1개와 + 조건에 만족하지 않는 나머지 배열로 구성하여 setTodo에 전달하기

2. 변경 과정

       //filter로 사용 ==> 배열로 반환
       const filterNext = todos.filter((item) => item.id === id ? true : false); //해당 배열
       filterNext[0].isDone = !filterNext[0].isDone;  //상태 반전

        setTodo((prev) => {
        const filterPrev = prev.filter((item) => {
          return item.id === id ? false : true; //나머지 배열
 
        })
        return [...filterPrev, filterNext[0]];  //나머지 배열 + 해당 배열
      }
        );
      console.log(filterNext);
     

3. 변경 과정

      //find로 사용 ==> 객체: 조건에 만족하는 하나의 정보를 객체로 반환
      
       const findNext = todos.find((item) => item.id === id ? true : false); // 해당 객체
       findNext.isDone = !findNext.isDone;  //상태 반전

        setTodo((prev) => {
        const filterPrev = prev.filter((item) => {
          return item.id === id ? false : true;  // 나머지 배열
 
        })
          return [...filterPrev, findNext];  //나머지 배열 + 해당 객체
      }
        );
       console.log(findNext);