[Javascript] 불변성 개념 정리

쏘소·2022년 4월 20일

Javascript

목록 보기

4/5

불변성을 지키지 않는다면 사용할 데이터가 어디서 어떻게 바뀌어가는지 흐름을 쫓아가기 어렵고, 이는 곧 예기치 못한 side effects나 버그로 이어지게 만든다. 또 리팩토링이 힘들게 된다.

다른 개발자의 입장에서도 불변성을 지켜 명시적으로 작성된 코드는 다른 곳에서 변수의 값이 바뀔 가능성이 있다는 것을 일일히 확인하지 않아도 되며, 코드를 읽는 그대로 흐름을 따라가면서 이해할 수 있도록 돕는다.

state와 props를 이용하는 리액트에서도 이러한 불변성의 개념을 지켜가면서 사용하도록 해야한다.

immutable한 값을 state나 props로 사용한다면 어떠한 일련의 이벤트를 통해 새롭게 만들어진 object가 변수에 할당 되는 것을 볼 수 있다. 이러한 새로운 값에 대한 참조는 기존의 값에서 값이 어떻게 변화하는지 추적하기가 쉽게 만들어준다.

불변성(Immutability)란 말 그대로 변하지 않는 것을 의미한다.

자바스크립트에서는 원시 타입(primitive type)들이 불변하는데 유형은 다음과 같다.

Boolean,
String
Number
Null
undefined
Symbol

위의 원시 타입들은 const나 let을 통해 변수에 할당하고 나면 변수가 특정 메모리 주소를 가르키게 된다. 변수에 값이 새롭게 할당하게 될 때는 완전히 새로운 값이 만들어져 재할당 된다.

let name = 'foo';
let newName = name;
name = 'bar';

console.log(newName); //foo
console.log(name); //bar

자바스크립트에서는 위에 나열한 immutable type을 제외하고 모든 값은 객체(Object)타입이며 변할 수 있는 값이다. 객체는 새로운 값이 만들어지지 않고 직접적으로 변경이 가능하다.

let x = {
  name: 'junimo'
};

let y = x;

x.name = 'ken';

console.log(y.name); // ken
console.log(x === y) // true

이러한 따라서 객체 타입에서 불변성을 지키기 위해서는 배열 값을 변경할때 주로 새로운 배열을 반환하는 map()이나 [...array, 'bar'] 이런식으로 전개 연산자를 사용할 수 있다. 기존의 값을 변경시키지 않고 불변성을 지킬 수 있다.

하지만, 객체 내부에 객체가 있는 경우 이러한 map(), filter()이나 spread를 이용한 복사만으로는 불가능하다. 이 때는 immer 라이브러리를 사용하면 쉽게 해결할 수 있다.

개발하면서 행복하기