Immutable.js는 JavaScript에서 변경 불가능한 데이터 구조를 다루는 라이브러리입니다. 이를 사용하면 객체의 상태를 변경할 때 항상 새로운 객체를 생성하게 되어, 객체 갱신에 따른 부작용을 피할 수 있습니다.

객체를 갱신하는 가장 일반적인 방법 중 하나는 set 메소드를 사용하는 것입니다. 이 메소드는 변경된 속성 값을 포함하는 새로운 객체를 반환합니다. 예시를 살펴보겠습니다.

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

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

const updatedPerson = person.set('age', 26);
console.log(updatedPerson.get('age')); // 26

const updatedAddress = person.setIn(['address', 'city'], 'Busan');
console.log(updatedAddress.getIn(['address', 'city'])); // Busan

set 메소드를 사용하여 person 객체의 age 속성을 26으로 변경한 새로운 객체인 updatedPerson을 만들었습니다. 또한, setIn 메소드를 사용하여 person 객체의 address 객체의 city 속성을 ‘Busan’으로 변경한 새로운 객체인 updatedAddress를 만들었습니다.

또다른 일반적인 방법으로는 update 메소드를 사용하는 것입니다. 이 메소드는 현재 상태를 인자로 받아, 수정 함수를 적용한 결과를 반환합니다. 예시를 살펴보겠습니다.

const updatedPerson = person.update('age', age => age + 1);
console.log(updatedPerson.get('age')); // 26

const updatedAddress = person.updateIn(['address', 'city'], city => city.toUpperCase());
console.log(updatedAddress.getIn(['address', 'city'])); // SEOUL

update 메소드를 사용하여 person 객체의 age 속성 값을 1 증가시킨 새로운 객체인 updatedPerson을 만들었습니다. 또한, updateIn 메소드를 사용하여 person 객체의 address 객체의 city 속성 값을 모두 대문자로 변경한 새로운 객체인 updatedAddress를 만들었습니다.

Immutable.js를 사용하여 객체를 갱신할 때는 원본 객체를 변경하지 않고 항상 새로운 객체를 반환하므로, 코드의 예측 가능성과 유지 보수성이 향상됩니다. 또한 메모리 내에서 변경된 객체가 새로 생성되므로, 상태 관리에 있어서도 매우 유용합니다.

더 자세한 내용은 Immutable.js 공식 문서를 참고하시기 바랍니다. 링크