3장. Immutable.js 익히기

Immutable.js는 자바스크립트상에서 불변성의 데이터를 다루는것을 도와줍니다. 3장을 진행하기에 앞서, 우선 자바스크립트에서 객체의 불변성에 대해서 알아보겠습니다.

객체의 불변성

이를 이해하려면, 간단한 자바스크립트 코드들을 실행해보아야합니다. 크롬에서 개발자도구를 열고, 다음 코드를 입력해보세요:

let a = 7;
let b = 7;

let object1 = { a: 1, b: 2 };
let object2 = { a: 1, b: 2 };

보시다시피, a와 b의 값은 같습니다. 이를 === 연산자로 비교해보면, 당연히 true 가 반환됩니다. 하지만 object1 과 object2 은, 지니고 있는 값은 같지만, 서로 다른 객체이기때문에 이를 비교하면 false가 반환될것입니다.

object1 === object2
// false

하지만, 이런 코드는 어떨까요?

let object3 = object1

이제 object3 과 object1 을 비교한다면, true 가 반환될거에요.

object1 === object3
// true

그렇다면, 다음 코드를 실행하고 나서 비교를 한다면 어떨까요?

object3.c = 3;

여전히 결과는 true 를 반환할것입니다. 그 이유는 object1과 object3은 서로 같은 객체를 가르키기 때문이죠.

object1 === object3
// true
object1
// Object { a: 1, b: 2, c: 3 }

보시다시피 object1 에도 c 값이 생성이 됐죠?

다른 예제로, 다음 코드는 어떨까요?

let array1 = [0,1,2,3,4];
let array2 = array1;
array2.push(5);

array2 에 5를 삽입하고 array1 과 array2를 비교하면 무엇이 나올까요?

array1 === array2
// true

예상했겠지만 이번에도 여전히 true 입니다.

하지만, 리액트 컴포넌트에서는 state 혹은 상위 컴포넌트에서 전달받은 props 의 값이 변할 때 리렌더링을 해야하는데, 만약에 배열혹은 객체를 직접적으로 수정한다면, 내부의 값이 수정됐을지라도 레퍼런스가 가르키는곳은 같기때문에 똑같은 값으로 인식합니다.

이러한 이슈 때문에, 우리가 지금까지 여러층으로 구성된 객체 혹은 배열을 업데이트 해야 할 때, ... 를 사용해서 기존의 값을 가지고있는 새 객체 혹은 배열을 만들었던 것 입니다.

하지만 이 작업을 하다보면, 간단한걸 하자고 코드가 복잡해질때도있습니다. 예를 들어 수정해야 할 값이 객체의 깊은곳에 위치한다면 다음과 같은 형식으로 해야겠지요:

let object1 = {
    a: 1,
    b: 2,
    c: 3,
    d: {
        e: 4,
        f: { 
            g: 5,
            h: 6
        }
    }
};

// h값을 10으로 업데이트함
let object2 = {
    ...object,
    d: {
        ...object.d,
        f: {
            ...object.d.f,
            h: 10
        }
    }
}

우리가 객체의 불변성을 유지 할 필요가 없다면 다음과 같이 간단하게 해도 되는데 말입니다:

object1.d.f.h = 10;

배열을 다룰때도 마찬가지로, 배열안에 있는 값을 수정하려면 수정하려는 원소 위치의 전후를 slice 로 가져와야하는데, 여간 귀찮은 일이 아닙니다.

이런 작업을 간소화 하기 위하여, 페이스북팀이 만든 라이브러리가 바로, Immutable.js 입니다.

이 라이브러리를 사용하면 위 코드를 다음과 같은 형식으로 작성 할 수 있게 되지요.

let object1 = Map({
    a: 1,
    b: 2,
    c: 3,
    d: Map({
        e: 4,
        f: Map({ 
            g: 5,
            h: 6
        })
    })
});

let object2 = object1.setIn(['d', 'f', 'h'], 10);

object1 === object2;
// false

어때요? 훨씬 짧아졌고 보기 쉬워졌지요?

이번 장에서는 Immutable.js 의 기본적인것들을 알아보고 우리의 멀티 카운터에 이를 적용해보도록 하겠습니다.