Mutation이란 무엇인가? (Mutable vs Immutable)

wha1e·2023년 8월 31일

JavaScript

Mutation이 뭐길래 알아보는 겁니까?

Mutate는 변경한다는 의미로 프로그래밍에서는 value를 change한다는 의미라고 볼 수 있다.

JavaScript에서는 데이터 타입을 다음과 같이 분류한다.

Primitive Data Types (원시 타입)
- undefined
- Boolean
- Number
- String
- BigInt
- Symbol
- …
Structural Data Types (참조 타입)
- Object
- Functions
- Array
- Map
- …

☝🏻 Immutable, Mutable은 값을 바꿀 수 있는지에 대한 여부에 따라 달라집니다.

“Immutable한 데이터라는 것은 값을 바꿀 수 없다는 의미니.. 한 번 쓰면 계속 유지되는 값인 것인가..??”

Immutable과 Mutable의 차이를 알아보고 어떻게 사용할 수 있는지 살펴보자

변경(Mutation)과 재할당(Reassignment) 비교

변경 (Mutation)

“변경은 값 자체를 변경하는 Mutation의 행위입니다!”

참조 타입(Structural Data Types)은 Mutable하다.

배열(Array)

let arr = [1, 2, 3];
arr[0] = 5; //배열 내부의 값을 직접 변경하였다!

객체(Object)

const cat = {
	name: "Maru",
	chur: "Oh~~ Yes!",
	water: "No!!!!!!"
};

cat.water = "Please... Say Yes..."; //객체 내부의 값을 변경하였다.

const로 선언한 객체이다. → const는 재할당을 허용하지 않는다!!

따라서, 내부의 값을 변경한 것이다.

재할당 (Reassignment)

“재할당은 새로운 데이터로 바꿔주는 Change의 행위입니다!”

원시타입(Primitive Data Types)은 Immutable하다.

여기서 Reassign은 기존의 값을 변경하는 것이 아니라 새로운 값을 할당하는 행위를 일컫는다.

let dinner = "chicken";

dinner[0] = "s"; //값을 변경하는 Mutation의 행위 -> 변경되지 않음!

dinner = "pizza"; //값을 재할당 하는 Reassign의 행위 -> dinner에 새로운 값이 할당됨

그래서 이걸 왜 알아야 합니까?

Immutability는 함수형 프로그래밍의 핵심 원리

변수를 통해 값을 재할당하는 경우,

immutable한 타입은 value 값 자체를 전달하기 때문에, 기존의 데이터와 독립된 형태로 사용이 가능하다.

mutable한 타입의 경우, reference 를 전달하여 같은 메모리 주소를 공유한다.

즉, mutable value는 값의 메모리 주소를 참조하여 사용하는 방식이기 때문에, 값을 변경하는 경우 해당 값을 사용하는 모든 곳에 영향을 주게 된다. → Side Effect(부수 효과)가 발생하게 되는 것이다.

이러한 문제들을 해결하기 위해서는 약간의 비용을 조금 더 들이지만 객체를 불변 객체 형태로 사용하는 것이다.

React에서는 위와 같은 이유로 상태가 변경되면 렌더링 트리를 새롭게 생성한다. 만약 immutable하게 데이터를 변경하지 않는다면, 새로운 객체가 생성되지 않고, 메모리 주소에 있는 데이터만 변경되기 때문에, React에서는 상태의 변경을 감지할 수 없다.