객체가 불변하다는 것(immutable)은 객체가 최초 생성되었을 때의 값이 변하지 않고 유지된다는 의미이다.
객체의 불변성을 지키면 원본 데이터가 변경, 훼손되는 것을 막을 수 있다.
하지만 자바스크립트는 객체가 너무나도 동적이라 속성 변경이 쉽다는 단점을 갖고 있다. 객체의 불변성이 중요하면서도 지키기 어려운 환경인 것이다.
함수형 프로그래밍에서 요구하는 수준의 immutability을 실현하는 방법은 생각보다 까다롭다. Object.freeze, Object.assign, 스프레드 연산자는 2차원 이상의 객체의 깊은 복사를 완벽하게 수행하지 하지 못하기 때문이다. (JSON 메서드를 사용해야 완벽한 깊은 복사가 가능)
그럼에도 불구하고 객체의 불변성이 중요한 이유는 전역 변수를 지양하는 이유와 비슷하다.
복잡한 코드에 전역 변수가 많을 경우 변수의 값이 변경되었을 때 그 변수를 사용하는 곳에서 의도치 않게 값이 변경될 수도 있고, 해당 변수가 어디 있는지 추적하기도 어려워진다.
객체 또한 불변성을 지키지 않고 참조 값을 여러 객체가 공유할 경우 어떤 객체에서 값이 변경되었을 때 의도치 않게 다른 객체에서도 값이 변경되며, 변경된 곳을 추적하기 어려워진다.
참고로 리액트에서 상태(state)의 불변성을 유지해야 하는 이유는 아래와 같다.
- 이전 상태와 비교해서 변경된 부분만 리렌더링해야 하기 때문에 이전 상태가 원본을 유지해야 한다.
- state는 객체 형태이다. 따라서 내부 속성값만 변경해서는 참조 값이 변경되지 않는데, 참조 값이 변경되지 않은 경우 상태가 변경되지 않은 것으로 판단하고 리렌더링되지 않는다.