🔶 不変性の重要性

🔹 サンプルコード(onToggle)&説明

const onToggle = useCallback((id) => {
    setTodos((todos) =>
      todos.map((todo) =>
        todo.id === id ? { ...todo, checked: !todo.checked } : todo,
      ),
    );
  }, []);

🔹 不変性を維持するのは何ですか?

🔹 不変性コードの例

    const array = [1,2,3,4,5];
    
    // 나쁜 예
    const nextArrayBad = array; // 똑같은 배열 가리킴 (배열 복사x)
    nextArrayBad[0]=100;
    console.log(array === nextArrayBad) // 완전 같은 배열 (true)
    
    // 좋은 예
    const nextArrayGood = [...array] // 모두 복사 (배열 내부 값)
    nextArrayGood[0]=100;
    console.log(array === nextArrayGood) // 다른 배열 (false)

    const object = {
      foo: 'bar',
      value: 1
    }
    
    // 나쁜 예
    const nextObjectBad = object; // 같은 객체 가리킴 (복사x)
    nextObjectBad.value = nextObjectBad.value +1;
    console.log(object === nextObjectBad); // true (같은 객체)
    
    // 좋은 예
    const nextObjectGood = {
      ...object, // 모두 복사 (기존 내용)
      value: object.value+1 // 새로운 값 덮어 씀
    }
    console.log(object===nextObjectGood) // false (다른 객체)

🔹 変わらない時はない。

🔹 展開演算子(…構文)→オブジェクト/配列の内部値をコピーする場合

    const todos = [{id: 1,checked: true},{id:2,checked: true}];
    const nextTodos = [...todos];
    
    nextTodos[0].checked=false;
    console.log(todos[0]===nextTodos[0]); // true (같은 객체 가리킴)
    
    nextTodos[0]={
      ...nextTodos[0],
      checked:false
    }
    console.log(todos[0]===nextTodos[0]); // false (새로운 객체를 할당)

🔹 オブジェクト内のオブジェクト

    const nextComplexObject = {
      ...complexObject,
      objectInside:{
        ...complexObject.objectInside,
        enabled: false
      }
    }
    
    console.log(complexObject === nextComplexObject) // false
    console.log(complexObject.objectInside === nextComplexObject.objectInside) // false

🔶 パフォーマンスの最適化は不要