자바스크립트의 불변성과 불변객체

원시 데이터와 참조데이터

자바스크립트에서 데이터 타입은 두가지로 나눌 수 있다. 원시 데이터와 참조 데이터이다.

let p = 10;
let p2 = p;
p2 = 15;
console.log(p, p2); // 10 15

해당 로그는 10 15를 보여준다. 이는 간단하게 설명해서 값이 전달되었다고 표현하는데,
즉 p의 값인 10이 p2에 전달되었다가 p2의 값이 15로 바뀐 경우인 것이다.
해당 변수들을 ===로 비교해보면 당연히 false를 반환하게 된다.

그럼 참조데이터는 어떻게 다를까?

let o = { name: "runningwater", like: "coffee" };
let o2 = o;
o2.like = "water";

console.log(o, o2); // {name: "runningwater", like: "water"} {name: "runningwater", like: "water"}

위와 같은 형태에서는 o와 o2가 동시에 바뀐 것을 확인할 수 있다.
왜그럴까? 참조 데이터에서는 값이 아니라 주소값을 전달하기 때문이라고 표현한다.
즉 해당 변수 o와 o2를 ===로 비교해보면 true를 반환한다.

불변성에 대하여

위의 예시로 든 객체를 보면 참조형 데이터는 가변한다는 것을 알 수 있다.
이런 가변성이 왜 리액트에서는 문제가 될까?
만약 o에서 o2로 객체를 변경한다고 다시 생각해보자.
리액트에서는 o에서 o2로 무언가 값이 변했다는 걸 파악한 후 다시 렌더링을 하게된다.
그런데 위의 경우처럼 같은 주소값을 바라보고 있는 o와 o2에 대해서는 그런 변화를 감지할 수 없게된다.
즉 기존의 데이터(o)와 새로운 데이터(o2)가 같이 바뀌게 되니 기존의 데이터가 사라졌다고 할 수 있는 것이다.

immer 등과 같이 불변성을 유지해주는 라이브러리나 rest-spread를 사용하는 이유가 여기에 있다.
바로 기존의 데이터가 유지되려고 하면 불변성이 필요하기 때문이다.