Immutable(1) - MoonGyeongHyeon/React_Study GitHub Wiki

React - Immutable.js(1)

불변 객체

객체지향 프로그래밍에 있어서 불변 객체는 생성 후 그 상태를 변경할 수 없는 객체를 말한다. 불변 객체의 반댓말은 가변 객체로 Javascript의 배열과 같이 객체 내에서 관리하는 값이나 상태를 변경할 수 있는 것을 말한다.

var greeting = new String('Hello World!!');

greeting.replace('World', 'Gil-dong');
greeting.valueOf(); // Hello World!!

위의 예에서 greeting 변수에 문자열 객체를 생성하여 대입했다. 그리고 문자열 객체의 replace 메소드를 통해 'World'를 'Gil-dong'으로 변경했다. 하지만 여전히 greeting 변수는 'Hello World!!'이다.

greeting 변수에 생성한 문자열 객체는 불변 객체이므로 값을 바꿀수 없다. 따라서 replace 메소드는 새로운 상태를 가지는 또 다른 객체를 생성한 뒤 반환한다. 변수에 값을 바꾸기 위해선 아래처럼 새로운 객체를 변수에 대입해야 한다.

var greeting = new String('Hello World!!');

greeting = greeting.replace('World', 'Gil-dong');
greeting.valueOf(); // Hello Gil-dong!!

값 객체

이러한 불변 객체의 특성은 number, string, boolean 에서 찾아볼 수 있다. 값 객체란 비교 연산 시 자신의 상태보다 값을 우선시하는 단순한 객체를 말한다.

React에서 불변성?

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

이러한 특징때문에 간단한 작업을 하더라도 코드가 복잡해질 수 있다. 아래의 코드를 보자.

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

// h값을 10으로 업데이트함
let object2 = {
    ...object1,
    d: {
        ...object1.d,
        f: {
            ...object1.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의 Map 은 객체 대신 사용되는 데이터 구조다. 이는, Javascript에 내장되어있는 Map 과는 다르다.

var Map = Immutable.Map;

var data = Map({
  a: 1,
  b: 2,
  c: Map({
    d: 3,
    e: 4,
    f: 5
  })
})

위와 같이 Map 함수 안에 객체를 넣어 호출하면 된다. 만약, 객체 내부에 또다른 객체가 있다면 그 객체도 감싸야한다.

Map 함수가 아닌 fromJS 를 사용해도 된다.

var fromJS = Immutable.fromJS;

var data = fromJS({
  a: 1,
  b: 2,
  c: { 
    d: 3,
    e: 4,
    f: 5
  }
});

fromJS 는 내부 객체들도 한번에 Map으로 변환해준다.

Map 함수나 fromJS 함수로 만든 Map을 로그로 찍어보도록 하자.

[object Object] {
  @@__IMMUTABLE_ITERABLE__@@: true,
  @@__IMMUTABLE_KEYED__@@: true,
  @@__IMMUTABLE_MAP__@@: true,
  __altered: false,
  __ensureOwner: function (t){return t===this.__ownerID?this:t?Yt(this.size,this._root,t,this.__hash):(this.__ownerID=t,this.__altered=!1,this)},
  __hash: undefined,
  __iterate: function (t,e){var r=this,n=0;return this._root&&this._root.iterate(function(e){return n++,t(e[1],e[0],r)},e),n},
  __iterator: function (t,e){return new Ht(this,t,e)},
  __ownerID: undefined,
  __toJS: function (){st(this.size);var t={};return this.__iterate(function(e,r){t[r]=e}),t},
  __toString: function (t,e){return 0===this.size?t+e:t+
...

위와 같이 나온다. Map을 그대로 사용할 순 없다. console.log(data.a) // undefined 와 같은 표현도 사용할 수 없다.

Mapd은 일반 객체가 아니기 때문에 별도의 방법으로 다뤄줘야 한다.

• 자바스크립트 객체로 변환하기

  Map을 일반 객체로 변환하는 방법은 다음과 같다.

  data.toJS();  // { a:1, b:2, c: { d: 3, e: 4 } }
  

  toJS() 함수는 Map을 일반 Javascript 객체로 변환해준다.

• 특정 키값 불러오기 및 설정하기

  Map의 특정 키값만을 불러오고 싶다면 다음과 같이 할 수 있다.

  data.get('a');  // 1
  var newData = data.set('a', 4);
  

  get() 함수는 파라미터로 전달된 key의 값을 불러온다. set() 함수는 값을 설정한다.

  set 함수를 포함해서 어떠한 값을 설정하는 함수는 기존의 값을 바꾸는 게 아니라, 주어진 변화를 적용시킨 새로운 Map을 반환한다.

• 깊숙한 값 불러오기 및 설정하기

  깊숙히 들어있는 값을 불러오고 설정해야 할 땐 getIn 과 setIn 을 사용하면 된다.

  data.getIn(['c', 'd']) // 3
  var newData = data.setIn(['c', 'd'], 10);
  

• 여러 개의 값 설정하기

  여러 개의 값을 동시에 설정할 때는 mergeIn 을 사용한다. 예를 들어, c.d와 c.e의 값을 동시에 바꿔야 하는 경우, setIn을 2번 호출할 수도 있지만 아래와 같이 한번에 해결할 수 있다.

  var newData = data.mergeIn(['c'], { d: 10, e: 10 });
  

  이렇게 했을 때, c.f의 값은 그대로 유지된다.

  최상위에서 merge를 해야한다면 아래와 같이 한다.

  var newData = data.merge({ a: 10, b: 10 })
  

• 전체 객체 업데이트하기

  전체 객체를 업데이트 할 때는 merge보다 다음과 같이 처리하는 게 좋다.

  var newData = data.set('c', Map({ d: 10, e: 10, f: 10 }))
  

  ​