불변성

aken·2025년 9월 21일

불변성

JavaScript나 React를 공부한 사람이라면 불변성이라는 키워드를 한 번쯤 본 적 있으실텐데요.
불변성이 무엇인지, 더 나아가 왜 React에서 불변성을 지켜야하는지에 관해 이야기해보려고 합니다.

불변성

불변성은 영어로 immutable라고 하고, 반대어로 mutable이 있어요.
각 단어의 뜻은 다음과 같아요.

mutable: 변할 수 있는, 잘 변하는
immutable: 변경할 수 없는, 불변의

JavaScript에서 무엇을 변경할 수 있고, 변경할 수 없는걸까요?

바로, 메모리에 저장된 데이터입니다. 이걸 이해하기 위해선 JavaScript에서 데이터가 저장되는 원리에 대해서 알아야 합니다.

데이터가 저장되는 원리

JavaScript에서 데이터 타입은 크게 2가지로 나뉩니다.

원시타입(primitive): number, string, boolean, null, undefined, Symbol, BigInt
객체타입(object): array, map, object, function, date, regexp, set, weakmap, weakset

이 두가지 타입에 따라 데이터가 저장되는 방식이 다릅니다.

원시타입

아래 코드는 a에 원시타입인 number 값을 할당하고, b는 a를 복사하고 있어요. 그 다음, a 값을 변경하고 있습니다.

let a = 1;
let b = a;

console.log(a, b) // 1 1

a = 2

console.log(a, b) // 2 1

메모리에선 어떤 변화가 있을까요?

a가 재할당되면, 기존 메모리에 저장된 값을 변경하지 않고(주소3), 새로운 메모리(주소4)에 재할당 할 값을 저장합니다. 그리고 a는 새로운 메모리 주소인 주소4를 참조해요.

즉, 주소3에 저장된 1은 변하지 않기 때문에 원시타입은 불변하다고 말해요.

객체타입

아래 코드는 obj2가 obj1을 복사하고 있고, obj1에 b 프로퍼티가 추가됐어요.

let obj1 = {a:1};
let obj2 = obj1;

console.log(obj1,obj2) // {a:1} {a:1}

obj1["b"] = 2

console.log(obj1,obj2) // {a:1, b:2} {a:1, b:2} 
console.log(obj1 === obj2) // true

메모리 영역에서는

obj1는 주소3을 저장해요.
주소3은 프로퍼티가 저장된 주소값으로 이뤄진 그룹을 저장해요.
obj2는 obj1이 저장하고 있는 주소3이 복사돼요. => 둘 다 동일한 주소값을 저장하여 같은 객체를 참조하기 때문에, 한쪽에서 프로퍼티를 변경하면 다른쪽에서도 반영됩니다.

객체의 프로퍼티가 추가되어, 주소3이 저장하고 있는 데이터가 변경되었어요.
즉, 값이 변경되었기 때문에 객체타입은 가변성을 지닌다고 말합니다.