전개연산자(spread syntax)는 shallow copy 이다.

즉, 내부의 값이 완전히 새로 복사되는 것이 아니라, 가장 바깥쪽에 있는 값만 복사가된다. 따라서, 내부의 값이 객체 혹은 배열이라면 내부의 값 또한 따로 복사해 주어야 한다.


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

배열 혹은 객체의 구조가 정말 복잡해진다면 불변성을 유지하면서 업데이트 하는것이 까다로워진다.

이때, "immer"라는 라이브러리의 도움을 받자 복잡한 객체의 상태를 다룰때 전개연산자를 여러번 사용하는 것은 번거로운 작업이고 가독성이 좋지 않다.

immer -> 짧고 쉽고 불변성유지하면서 상태업데이트!