불변성
불변성은 데이터가 생성된 이후 기존 값을 직접 바꾸지 않고, 변경이 필요할 때 새 값을 만들어 상태 변화를 표현하는 성질입니다.
왜 중요한가
- 데이터 변경 지점을 추적하기 쉽습니다.
- 예측 가능한 상태 관리를 할 수 있습니다.
- React에서는 참조 변경을 기준으로 리렌더링 여부를 판단하기 쉬워집니다.
- 가변 객체를 여러 곳에서 공유할 때 생기는 부작용을 줄일 수 있습니다.
예시
const person = { name: "Alice", age: 25 };
// 불변성 미유지
person.age = 26;
// 불변성 유지
const updatedPerson = { ...person, age: 26 };
배열도 기존 배열을 직접 변경하지 않고 새 배열을 만들어 갱신합니다.
const items = [1, 2, 3];
const nextItems = [...items, 4];
도구와 방법
- 스프레드 연산자
Object.assign()Object.freeze()- Immer, Immutable.js 같은 라이브러리
주의사항
새 객체를 계속 만들기 때문에 비용이 전혀 없는 것은 아닙니다. 하지만 대부분의 애플리케이션에서는 변경 흐름이 명확해지는 장점이 더 큽니다.
중첩 객체는 얕은 복사만으로 내부 객체까지 새로 만들어지지 않으므로 깊은 구조를 다룰 때 주의해야 합니다.
핵심 정리
불변성은 기존 데이터를 직접 수정하지 않고 새 데이터를 만들어 변경을 표현하는 방식입니다.
상태 변경 추적과 예측 가능성을 높여 React 같은 UI 라이브러리에서 특히 중요합니다.