immer

Immer JS

이번 포스트에서는 Immutable JS 포스트에서 언급하였던 Immer JS에 대해 설명하려고 합니다.

Immutable JS 포스트에서 설명드린 불변성을 유지하려할때, spread 연산자보다 가독성을 좋게 하기위해
immutableJS를 사용한다고 설명 하였는데, immutableJS의 가독성도 spread에 비해 뛰어나게 좋은 정도는 아니고, 사용하기가 그닥 편리하지는 않습니다.( 필자의 생각 )

그러나 Immer JS를 사용하면 가독성이 좋아지고 편리하게 사용할 수 있습니다.
코드를 통해서 비교해보도록 하겠습니다.
아래와 같이 reducer를 통하여 불변성을 유지하며 state를 변경할때
immutable JS를 사용하면 아래와 같은 코드로 작성할 수 있고,

const counterInitState = Map({
  value: 0,
  diff: 1
});
const counter = ( state = counterInitState, action) => {
  switch(action.type) {
    case Types.INCREMEMT:
      return state.update('value', () => state.get('value') + state.get('diff'));
    case Types.DECREMENT:
      const minDecrement = state.get('value') <= 0 ? state.get('value') : state.get('value') - state.get('diff');
      return state.update('value', () => minDecrement);
    case Types.SET_DIFF:
      return Object.assign({}, state, {
        diff: action.diff
      });
    default:
      return state;
  }
};
~~~  

Immer JS를 사용하면 아래와 같은 코드로 작성 할 수 있습니다. 
~~~javascript
const counterInitState = {
  value: 0,
  diff: 1
};

const counter = produce((draft, action) => {
  switch(action.type) {
    case Types.INCREMEMT:
      return {
        value: draft.value + draft.diff,
        diff: draft.diff
      }
    case Types.DECREMENT:
      const minDecrement = draft.value <= 0 ? draft.value : draft.value - draft.diff;
      return {
        value: minDecrement,
        diff: draft.diff
      }
    case Types.SET_DIFF:
      return {
        value: draft.value,
        diff: draft.diff
      }
    default:
      return draft;
  }
}, counterInitState);

여러분이 보시기에는 어느 코드가 저 보기편하고 작서하기 쉬운 코드일것 같나요?
필자의 생각으로는 ImmerJS를 사용한 코드가 가독성도 뛰어나고 코드작성시 편리하다고 생각합니다.
get을 사용하지 않고 .으로 접근할수 있는것 많으로도 많은 차이가 느껴지고 불변객체에 메서드를 랩핑해주지 않아도 되는 편리합니 있습니다.

immerJS 공식 사이트에서는 immer를 이렇게 설명합니다.

immer
이미지 출처 : [https://github.com/mweststrate/immer]

immer를 사용하는것은 개인 비서를 갖는 것과 같습니다.
immer는 state를 받아서 draft라는 이전 state를 복사하고, 복사한 draft를 변경한뒤 state에 적용하면서 바꿔치기 하게됩니다.

쉽게 설명하면

작가가 글은 쓰고,
작가의 글을 비서가 복사해 사본을 만들고 맞춤법등 변경될 부분을 수정한다.
마지막으로 비서가 수정한 글을 출판사에 제출한다.

이렇게 동작을 설명 할 수 있습니다.

이렇게 immutable, immer에 대해 설명하였으나, 결론적으로는
spread 연산자를 사용하던 immutable을 사용하던 아니면 immer를 사용하던, 선택은 사용하는 개발자의 몫이며
본인이 더 편리한 라이브러리를 사용하시길 바랍니다.

immer

Immer JS

Comments: