11장에서는 컴포넌트 업데이트 성능을 어떻게 최적화해야 하는지, 불변성을 유지하면서 상태를 업데이트하는 것이 왜 중요한지 배웠습니다. 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있죠. 하지만 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트하는 것이 매우 힘듭니다.

const object = {
  somewhere: {
    deep: {
      inside: 3,
      array: [1, 2, 3, 4]
  },
    bar: 2
},
  foo: 1
};
 
// somewhere.deep.inside 값을 4로 바꾸기
let nextObject = {
...object,
  somewhere: {
  ...object.somewhere,
    deep: {
    ...object.somewhere.deep,
      inside: 4
  }
}
};
 
// somewhere.deep.array에 5 추가하기
let nextObject = {
...object,
  somewhere: {
  ...object.somewhere,
    deep: {
    ...object.somewhere.deep,
      array: object.somewhere.deep.array.concat(5)
  }
}
};