immer.js 라이브러리 불변성관련 정리

원문 : https://react-etc.vlpt.us/02.immer.html

immer.js 를 통한 넘나리 쉬운 불변성 관리 · GitBook

React  Immutable.js – 리액트의 불변함, 그리고 컴포넌트에서 Immutable.js 사용하기 에서는, 리액트에서 왜 불변성을 유지하는것이 중요한지 알아보았고, Immutable.js 라이브러리를 사용하여 불변성을 조금 더 쉽게 관리하는 방법을 알아보았었습니다.

Immutable.js 는 자바스크립트 진영해서 불변성 관리의 대명사라고 할 수 있을정도로 압도적인 다운로드 수를 가지고 있습니다.

리액트 라이브러리의 다운로드 수의 50% 정도 되니까, 정말 많은 리액트 프로젝트들은 이미 Immutable.js 를 사용 할 것이라고 예상 할 수 있겠죠.

저 또한 회사 업무에서도, 그리고 사이드 프로젝트에서도 immutable.js 를 자주 애용합니다.

이 라이브러리는 정말 유용한 도구이지만 몇가지 단점이 있습니다.

1. 처음 사용하는 사람은, Immutable.js 의 내장함수에 익숙해지는데 시간이 꽤 걸립니다. Immutable.js 의 데이터를 다룰 땐 일반 객체를 다루듯이 사용하는것이 아니라, 값을 읽을땐 .get, .getIn, 그리고 값을 설정 할 땐, .set, .setIn, .update, .updateIn 등의 함수들을 사용하고, 그 외에도 merge, mergeDeep 등의 다양한 내장함수를 사용해야하는데, 나중에 익숙해지면 굉장히 편하긴 하지만, 그 전까지는 조금 불편하기도 합니다.
2. 여러분들이 만약에 나중에 TypeScript, Flow 등의 타입 시스템에 프로젝트에 적용하게 된다면 조화가 매끄럽지 않습니다. 물론 Record 라는 기능을 통하여 사용 할 수는 있지만, 꽤 부자연스럽습니다. 이 부분은 Immutable.js v4 (현재 릴리즈 버전 v3.8.2) 에서는 많이 개선이 되어있다고 합니다. 하지만, Immutable.js v4 은 아직 정식 릴리즈가 되어있지 않았으며 현재 이 상태로 6개월정도 방치되어있습니다.  메인테이너가 현재 이에 대해서 완전히 잊은것은 아니지만, 지금은 바빠서 안건들이고있는것으로 판단되며 언젠가는 처리 할 것으로 보입니다.  그리고 커뮤니티는 기다리고 있죠 ㅎㅎ 수많은 프로젝트가 의존중인 프로젝트인 이상, 아마 조만간 업데이트 될 것입니다.

immer.js

그러다가, immer.js 라는 새로운 불변성 관리 라이브러리가 릴리즈되었습니다. immutable.js 를 완전히 대체할 무언가는 아니겠지만, immutable.js 보다 훨씬 더 편한점도 있고 Flow / TypeScript 지원 부분에서 훨씬 매끄러운 라이브러리입니다.

Immutable.js 나 유사 불변성 관리 라이브러리처럼 다양한 업데이트 함수를 통하여 설정하는것이 아니라, 그냥 일반 객체 / 배열을 다루듯이 사용하면 immer 가 알아서 처리를 해줍니다.

다음 코드는 immer 의 README 쪽에 있는 예제 코드입니다:

import produce 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
})

immer 에서 오직 신경써야 할 것은 produce 함수 뿐입니다. 따로 알아둬야 할 다른 함수들은 없습니다. 이 함수는 두가지 파라미터를 받아오게 되는데, 첫번째 파라미터는 수정시키고 싶은 객체 (혹은 배열) 을 전달하고, 두번째 파라미터는 업데이터 함수를 전달해줍니다. 업데이터 함수에서는 파라미터로 받은 draftState 를 불변성에 대해서 신경쓰지 않고 일반 자바스크립트 다루듯이 바로 업데이트를 해주면, immer 가 나머지 작업을 처리해줍니다.

이 링크 에는 immer 를 CDN 을 통해 불러와서 JSBin 에서 사용하는 예제가 있습니다. 한번 참고해보시면 도움이 될 것입니다.

정리

이미 여러분의 프로젝트에서 immutable.js 를 사용중이라면, 굳이 라이브러리를 교체 할 필요는 없습니다. (특히, 프로젝트가 크다면 그 과정 자체가 시간적으로도 꽤 오래 걸릴 수 있기 때문입니다.) 하지만, 그 대신에 여러분이 새로운 프로젝트를 구성해야 하는 상황에 놓여진다면 이 라이브러리를 사용하는 것에 대해서 고민해보시는것을 권장드립니다.

저의 경우도 현재 사이드 프로젝트에서 immer.js 을 사용하고 있으며 매우 만족스럽게 사용하고 있습니다. 아마 당분간은 앞으로 만드는 프로젝트에서는 immutable.js 대신에 이 라이브러리를 쓸 듯 합니다. 하지만, 물론 회사에서는 immutable.js 를 계속해서 쓰긴 하겠죠 ㅎㅎ