JavaScript에서 불변 객체(Immutable Object)는 한 번 생성된 후
그 상태를 변경할 수 없는 객체를 의미합니다.
즉, 불변 객체의 속성이나 값을 수정할 수 없으며,
이러한 객체를 다룰 때는 새로운 객체를 생성하여 변경 사항을 반영합니다.
불변 객체의 주요 특징과 장점
상태 관리 용이: 불변 객체는 상태를 변경할 수 없기 때문에,
이전 상태를 쉽게 추적할 수 있습니다.
이는 특히 Redux와 같은 상태 관리 라이브러리에서 유용합니다.
예측 가능성: 불변 객체는 상태가 변하지 않기 때문에,
함수형 프로그래밍의 원칙을 따르며,
코드의 예측 가능성을 높입니다.
성능 최적화: 불변 객체는 참조 비교를 통해 변경 여부를 쉽게 판단할 수 있습니다.
이는 성능을 최적화하는 데 도움이 됩니다.
안전성: 불변 객체는 다른 코드에서 객체를 변경할 수 없기 때문에, 의도치 않은 부작용을 줄일 수 있습니다.
Object.freeze(): 이 메서드는 객체를 동결하여 더 이상 수정할 수 없도록 만듭니다.
하지만 중첩된 객체는 여전히 변경될 수 있습니다.
const obj = Object.freeze({ a: 1, b: 2 });
obj.a = 3; // 무시됨
console.log(obj.a); // 1
무시무시 한 녀석이다.
Spread Operator: 객체를 복사하고 새로운 속성을 추가하여 불변성을 유지할 수 있습니다.
const original = { a: 1, b: 2 };
const updated = { ...original, b: 3 };
console.log(original); // { a: 1, b: 2 }
console.log(updated); // { a: 1, b: 3 }
Immutable.js
Immutable.js: 이 라이브러리는 불변 데이터를 쉽게 다룰 수 있는 다양한 자료구조를 제공합니다.
불변 자료구조: Immutable.js는 List, Map, Set, Record 등 다양한 불변 자료구조를 제공합니다. 이러한 자료구조는 한 번 생성된 후 변경할 수 없으며, 변경이 필요할 경우 새로운 객체를 생성합니다.
성능 최적화: Immutable.js는 구조 공유(Structural Sharing) 기법을 사용하여 메모리 사용을 최적화합니다. 이는 변경된 부분만 새로운 객체로 생성하고, 나머지 부분은 기존 객체를 재사용하여 성능을 향상시킵니다.
체이닝(Chaining): Immutable.js는 메서드 체이닝을 지원하여, 여러 작업을 연속적으로 수행할 수 있습니다. 이는 코드의 가독성을 높이고, 불변성을 유지하면서도 편리하게 데이터를 조작할 수 있게 합니다.
간편한 비교: 불변 객체는 참조 비교를 통해 쉽게 변경 여부를 판단할 수 있습니다. 이는 상태 관리에서 성능을 높이는 데 유리합니다.
import { Map, List } from 'immutable';
// Immutable Map 생성
const map1 = Map({ a: 1, b: 2 });
const map2 = map1.set('b', 3); // 새로운 Map 생성
console.log(map1.get('b')); // 2
console.log(map2.get('b')); // 3
// Immutable List 생성
const list1 = List([1, 2, 3]);
const list2 = list1.push(4); // 새로운 List 생성
console.log(list1.size); // 3
console.log(list2.size); // 4
장점
상태 관리: Redux와 같은 상태 관리 라이브러리와 함께 사용하면,
상태의 불변성을 유지하면서도 효율적으로 상태를 관리할 수 있습니다.
성능: 대규모 애플리케이션에서 성능을 최적화할 수 있는 방법을 제공합니다.
가독성: 체이닝과 불변성을 통해 코드의 가독성을 높일 수 있습니다.
단점
학습 곡선: Immutable.js의 자료구조와 메서드에 익숙해지는 데 시간이 필요할 수 있습니다.
추가 라이브러리: Immutable.js를 사용하기 위해 추가적인 라이브러리를 설치해야 하므로,
프로젝트의 복잡성이 증가할 수 있습니다.
'개발' 카테고리의 다른 글
js 실행 컨텍스트 와 콜 스택 (1) | 2024.11.06 |
---|---|
js null 과 undefined (0) | 2024.11.06 |
js 데이터 타입 과 메모리 관리 (4) | 2024.11.05 |
js Set (0) | 2024.11.05 |
js Map (0) | 2024.11.05 |
댓글