Immutable.js를 활용한 자바스크립트 불변 데이터 구조

07 Nov 2023

javascript

불변 데이터란?

불변 데이터는 한 번 생성되고 나면 수정할 수 없는 데이터를 의미합니다. 즉, 기존 값을 변경하는 것이 아니라 새로운 값을 생성하여 반환하는 방식입니다. 이는 변경되지 않는 데이터 구조를 유지하고 예측 가능한 프로그래밍을 가능하게 합니다.

Immutable.js 소개

Immutable.js는 Facebook에서 개발된 자바스크립트 라이브러리로, 불변 데이터 구조를 쉽게 관리할 수 있는 유틸리티를 제공합니다. 이를 통해 복잡한 상태를 간결하게 관리하고, 불변성을 유지하여 장기적인 성능과 안정성을 보장할 수 있습니다.

Immutable.js 사용법

설치

먼저 Immutable.js를 프로젝트에 설치해야 합니다. npm을 사용하는 경우 아래 명령어를 실행합니다.

npm install immutable

불변 객체 생성

Immutable.js에서는 Map, List, Set, Stack 등 다양한 불변 객체를 생성할 수 있습니다. 예를 들어 Map 객체를 생성하는 방법은 다음과 같습니다.

const { Map } = require('immutable');

const person = Map({
  name: 'John',
  age: 25,
  address: Map({
    city: 'Seoul',
    country: 'South Korea'
  })
});

불변 객체 접근 및 수정

불변 객체를 접근하거나 수정할 때는 get, set, update 등의 메소드를 사용합니다. 예를 들어 age 값을 가져오고, name 값을 변경하는 방법은 다음과 같습니다.

const age = person.get('age');
const updatedPerson = person.set('name', 'Steve');

불변 객체 병합

Immutable.js에서는 두 개의 불변 객체를 병합할 수 있는 merge 메소드를 제공합니다. 예를 들어 person 객체와 새로운 address 값을 병합하는 방법은 다음과 같습니다.

const newAddress = Map({
  city: 'Busan',
  country: 'South Korea'
});
const mergedPerson = person.merge({ address: newAddress });

Immutable.js의 장점

성능 개선: Immutable.js는 내부적으로 효율적인 데이터 구조를 사용하여 메모리 사용량을 줄이고 성능을 향상시킵니다.
예측 가능한 동작: 불변 데이터 구조를 사용하면 부작용 없는 함수형 프로그래밍을 할 수 있으며, 예측 가능한 동작을 통해 디버깅이 쉬워집니다.
재사용 가능한 코드: 변경 불가능한 데이터는 다른 부분에서도 재사용할 수 있으며, 상태 관리가 간단해지고 코드의 재사용성도 높아집니다.

목차