불변성 (Immutability)

값을 변경하지 못 하는 특성 -> 데이터의 원본이 훼손되는 것을 방지
자바스크립트의 원시 타입이 가진 속성 -> 원시 타입이 아닌 타입 (객체 타입)은 모두 값이 변경될 수 있음
React의 가상 돔을 업데이트 시 변경점을 체크하는 방법은 이전 객체와 현재 객체가 다른지 비교하는 것 -> setState를 이용하여 객체가 직접 변경되지 않게 하고 새로운 객체를 가리키게 함으로서 상태가 변경되었는지 체크

원시 타입

String
Number (+ BigInt)
Boolean
Null
Undefined
Symbol

이 값은 변형할 수 없으므로, 값 변경 시에는 값이 바뀌는 것이 아니라 가리키는 참조가 변경됨

let str = "test";
str = "test2";

// str의 값이 test2로 바뀐 것이 아니라 test 대신 test2를 가리키도록 바뀐 것

불변 객체

원시 타입이 아닌 타입 (객체, 배열 등) 에 불변성을 부여하는 것
Object.assign() -> 객체의 iterable한 내용을 복사한 새로운 객체 반환 -> 2차원 이상의 객체는 깊은 복사가 되지 않으므로 변경 가능
Object.freeze() -> 객체의 값을 변경 불가능하게 만듦 -> 2차원 이상의 객체는 여전히 변경 가능
Immutable.js, Immer 등의 라이브러리를 사용하면 2차원 이상의 객체에도 간편하게 불변성을 부여할 수 있음

참고 사이트