[리액트] immutable-js 사용해보기

리액트에서 state는 항상 불변이어야 한다. state의 기존 객체를 직접 수정할 수 없고, setState 함수를 통해서만 수정해주어야 한다. 그렇지 않으면 컴포넌트가 재 렌더링되지 않는다.

setState 호출 -> shouldComponentUpdate가 true -> 가상 DOM과 실제 DOM을 비교해서 다르면 -> 화면을 다시 그린다. immutable한 변수를 사용하면, 변수의 내용을 하나하나 비교할 것 없이 레퍼런스만 비교하면 되기 때문에 부담이 줄게 된다.

이런 immutable한 변수를 만드는 방법에는 immutability-helper나 immutable-js가 있다.

---

Immutable-js |

$ npm install immutable
$ yarn add immutable

npm이나 yarn을 이용해서 우선 모듈을 설치해준다.

 

1. 객체 선언

let obj = Map({
  id: 1,
  text: "aa",
});

객체는 Map( ) 을 통해 선언한다.

let obj = Map({
  a: 1,
  b: 2,
  c: 10,
  d: Map({ e: 3 }),
});

객체 안 객체도 Map으로 감싸준다.

let arr = List([Map({ id: 1, text: "aa" }), Map({ id: 2, text: "bb" })]);

배열은 List()로 선언한다.

 

2. 값 읽기

console.log(obj.get("c"));
console.log(obj.getIn(["d", "e"]));

값을 읽을 때는 key값을 이용해 get(key)으로 찾는다. 깊은 곳에 있는 값은 getIn([key1, key2,...])으로 찾는다.

console.log(arr.getIn(0));
console.log(arr.getIn([1, "id"]));

List도 비슷하게 index를 이용해 get, getIn으로 찾는다.

 

3. 값 설정 및 변경

 

let newObj = obj.set("f", 7);
newObj = newObj.update("c", (v) => v + 1);

let newArr = arr.setIn([2, "text"], "cc");
newArr = newArr.updateIn([1, "text"], () => "not bb");

set, setIn 함수는 값을 설정해준다. 규칙은 get, getIn과 비슷하다.

update, updateIn 함수는 두번째 인자로 updater 함수를 받는다.