불변성(Immutability)이란 무엇인가요
불변성은 데이터가 최초 생성된 이후 기존 상태를 직접 변경하지 않는 성질입니다. 변경이 필요할 때는 기존 객체를 수정하지 않고 새로운 객체를 만들어 표현합니다.
예시
객체와 배열 같은 참조 타입은 기본적으로 가변적입니다.
const person = { name: "Alice", age: 25 };
// 불변성 미유지
person.age = 26;
// 불변성 유지
const updatedPerson = { ...person, age: 26 };
배열도 push()로 직접 바꾸기보다 새 배열을 만들어 갱신할 수 있습니다.
const items = [1, 2, 3];
const nextItems = [...items, 4];
왜 유지하는가
불변성을 지키면 데이터가 언제, 어디서 변경되었는지 추적하기 쉽습니다. 가변 데이터를 여러 곳에서 직접 수정하면 변경 흐름을 파악하기 어려워지고 예상하지 못한 부작용이 생길 수 있습니다.
React에서도 상태의 참조가 바뀌면 변경을 감지하기 쉬워지므로, 상태를 직접 수정하지 않고 새 객체나 배열로 교체하는 방식이 중요합니다.
방법
스프레드 연산자, Object.assign(), Object.freeze(), Immer, Immutable.js 등을 사용할 수 있습니다. 다만 중첩 객체는 얕은 복사만으로 내부까지 복사되지 않으므로 구조가 깊을 때 주의해야 합니다.
정리
불변성은 기존 값을 직접 바꾸지 않고 새 값을 만들어 변경을 표현하는 방식입니다. 약간의 객체 생성 비용은 있지만, 상태 추적과 유지보수성, 안정성을 높이는 장점이 큽니다.