[TIL] React Immutable

Immutable이란

react와 마찬가지로 페이스북 팀에서 만든 상태관리 라이브러리 입니다. 불변함(Immutability)를 지키며 상태관리하는 것을 편하게 해줍니다.

설치

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);

규칙

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

정리

react에서 state를 업데이트 할 때는 언제나 불변함을 유지시켜주어야 합니다. 그냥 자바스크립트 기능만을 사용하여 충분히 불변함을 유지할 수 있지만, state의 구조가 조금 복잡할 때 사용한다면 더욱 효과적으로 사용할 수 있습니다.

Reference

[Develop/React] Immutable 정리
React ❤️ Immutable.js – 리액트의 불변함, 그리고 컴포넌트에서 Immutable.js 사용하기
redux에 Immutable.js을 끼얹어 상태 관리를 해보자(불변성 관리)