#9 immer를 사용한 불변성(Immutability) 유지

 

1. Immutability ?

2. immer 사용법

 

1. Immutability ?

• 정의 : Immutability(변경불가성)는 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미
• Javascript에서 객체는 참조(reference) 형태로 전달하고 전달 받는데, 그 객체가 참조를 통해 공유되어 있다면 그 상태가 언제든지 변경될 수 있기 때문에 문제가 될 가능성도 커지게 된다. 이 문제의 해결 방법은 비용은 조금 들지만 객체를 불변객체로 만들어 프로퍼티의 변경을 방지하는 것이다.
• React에서 immutability
  • React 컴포넌트의 state 를 변경해야 한다면 객체의 값을 직접적으로 수정하면 절대 안되고, 무조건 setState( ) 를 통해 state 를 업데이트 해주어야한다.
  • 하지만 깊은 구조의 state 를 불변함을 유지하면서 업데이트 하려면 코드가 매우 복잡하게 되어 가독성이 떨어 매우 떨어지게된다.
  • immer 라이브러리를 사용하면 불변성 관리문제를 매우 간단하게 해결할 수 있다.

 

2. immer 사용법

//예시코드

import porduce from 'immer';

const baseState = [
    {
        todo: "Learn typescript",
        done: true
    },
    {
        todo: "Try immer",
        done: false
    }
]

const nextState = produce(baseState, draftState => {
    draftState.push({todo: "Tweet about it"});
    draftState[1].done = true;
});

// 반환값
nextState = {
  {
        todo: "Learn typescript",
        done: true
    },
    {
        todo: "Try immer",
        done: true
    },
      {    
          todo: "Tweet about it"
    }
}

• produce 함수는 두 가지 파라미터를 받는다
  1. 첫번째 파라미터 : 수정하고 싶은 상태
  2. 두번째 파라미터 : 상태를 어떻게 업데이트할지 정의하는 함수
• https://immerjs.github.io/immer/docs/introduction