Immutable.js 치트시트 (불변 영속 데이터 구조)

Immutable.js는 JavaScript를 위한 영속적 불변 데이터 구조를 제공하여 React 애플리케이션의 변경 감지 및 렌더링 성능을 극대화합니다.

Map (불변 키-값 객체)

import { Map } from 'immutable';

const user = Map({ name: 'Alice', age: 30 });

// Accessing values
user.get('name');        // "Alice"
user.has('age');         // true

// Immutably updating (returns new Map instance)
const updated = user.set('age', 31);
const removed = user.delete('age');
const merged = user.merge({ role: 'admin', age: 32 });

// Converting back to plain JavaScript object
user.toJS();             // { name: "Alice", age: 30 }

---

List (불변 배열)

import { List } from 'immutable';

const numbers = List([1, 2, 3]);

numbers.get(0);          // 1
const appended = numbers.push(4);    // List [1, 2, 3, 4]
const prepended = numbers.unshift(0);// List [0, 1, 2, 3]
const filtered = numbers.filter(n => n > 1);
const mapped = numbers.map(n => n * 2);

---

중첩된 깊은 경로 업데이트 (Deep Nested Updates)

import { fromJS } from 'immutable';

const state = fromJS({
  user: {
    profile: {
      location: 'San Francisco'
    }
  }
});

// Deep access
state.getIn(['user', 'profile', 'location']); // "San Francisco"

// Deep update
const nextState = state.setIn(['user', 'profile', 'location'], 'Tokyo');

// Deep update with function
const incremented = state.updateIn(['stats', 'views'], 0, v => v + 1);

---

관련 치트시트

• Redux
• React