[React] React Immutable

Immutable 이란?

immutable은 react와 마찬가지로 페이스북 팀에서 만든 상태관리 라이브러리다. 불편함(Immutablity)를 

지키며 상태관리하는 것을 편리하게 해준다.

 

설치법

npm install immutable

 

Immutable의 필요성

Immutable은 이름에서도 알 수 있듯 객체의 불변성을 제공하는 라이브러리이다.

react의 컴포넌트는 state 또는 상위 컴포넌트에서 전달받은 props(상태값)이 변할 때 리렌더링된다.

만약 직접 객체안에 내부 값을 직접 수정한다면 레퍼런스가 가리키는 곳은 같기 때문에 똑같은 값으로 인식한다.

 

따라서, 전개 연산자나 assgin함수를 이용하여 새로운 객체나 배열을 만들었지만 구조가 복잡할 경우에는 

그 코드 또한 복잡한 방식으로 구성되었다.

 

const obj1 = {
   a: 1,
    b: 2,
     c: {
       d: 3,
        e: {
           f: 4
        }
     }
}


// f값을 5로 업데이트 객체 반환 
const obj2 = {
   ..obj1,
   c: {
      ...obj1.c,
      e: {
        f: 5
      }
   }
}

 

이런 작업을 간소화하기 위해서는 Immutable.js라이브러리를 사용한다. 라이브러리를 사용해 위 코드를 다음과

같이 변경할 수 있다.

import { Map } from "immutable";

const obj1 = Map({
   a: 1,
    b: 2,
     c: Map({
       d: 3,
         e: Map({
            f: 4
         })
     })
})

// f를 5로 업데이트 새로운 객체로 반환
const obj2 = obj1.setIn(['c', 'e', 'f'],5);

Immutable의 규칙

• 객체: Map 함수
• 배열: List 
• 설정: Set
• 읽음: Get 
• 읽은 다음 설정: update
• 내부에 있는 값에 대한 작업: 뒤쪽에 ln(setIn, getIn, updateIn)
• 일반 자바스크립트 객체로 변환: toJS
• List엔 배열 내장함수와 비슷한 함수들이 존재(push, slice, filter, sort, concat...)
• 특정 key값을 삭제 / List에서 원소 삭제: delete

정리

react에서 state를 업데이트 할 떄에는 언제나 불변함을 유지시켜주어야 한다. 기존의 Javascript 기능만을 사용해 

충분히 불변함을 유지할 수 있지만, state의 구조가 조금 복잡할 경우 사용한다면 더욱 효과적으로 사용할 수 있다.

 

Reference

[TIL] React Immutable