17.6.2 immer

리듀서에서 상태를 업데이트할 때는 불변성을 지켜야 하기 때문에 앞에서는 spread 연산자(…)와 배열의 내장 함수를 활용했습니다. 그러나 모듈의 상태가 복잡해질수록 불변성을 지키기가 까다로워집니다.

따라서 모듈의 상태를 설계할 때는 객체의 깊이가 너무 깊어지지 않도록 주의해야 합니다. 깊은 객체와 깊지 않은 객체를 한번 비교해 볼까요?

const deepObject = {
  modal: {
    open: false,
    content: {
      title: '알림',
      body: '성공적으로 처리되었습니다.',
      buttons: {
        confirm: '확인',
        cancel: '취소',
    },
  },
},
  waiting: false,
  settings: {
    theme: 'dark',
    zoomLevel: 5,
},
};

const shallowObject = {
  modal: {
    open: false,
    title: '알림',
    body: '성공적으로 처리되었습니다.',
    confirm: '확인',
    cancel: '취소',
},
  waiting: false,
  theme: 'dark',
  zoomLevel: 5
}