[React] 리액트의 불변성 (스프레드 연산자 이용하여 불변성 지키기)

리액트의 불변성

리액트에서는 state 값을 변경할 때 불변성을 지켜야 한다.

불변성이란 어떤 값을 직접 변경하면 안 된다는 의미로,

변경하는 대신 복사 등의 방법을 통해 새로운 값을 만들어야 한다.

 

 

스프레드 연산자를 이용하여 불변성 지키기

리액트 사용시 불변성을 지키기 위한 방법으로,

스프레드 연산자(spread operator)를 이용하여 객체를 얕은 복사(shallow copy)하는 방법이 있다.

 

스프레드 연산자는 '...' 로 표기하며 다음과 같이 사용한다.

 

const a = { a1: 1, a2: 2 };
const b = a;
a === b;    // true

const c = { ...a };
a === c;    // false

 

const b = a 는 대입연산자를 이용한 것으로, a === b 에서 true가 나온다.

하지만 스프레드 연산자 '...'를 이용하여

const c = { ...a } 와 같이 입력하면, a === c 에서 false가 나오므로 불변성을 해치지 않는다.

 

const a = [1, 2, 3];
const b = a;
a === b;    // true

const c = { ...a };
a === c;    // false

 

배열에서도 스프레드 연산자 사용은 가능하다.

 

 

한계

리액트에서 불변성을 유지하기 위해 스프레드 연산자를 사용할 수 있지만,

객체의 깊이가 깊어지는 경우에는 불변성 유지가 힘들 수 있다.

 

이 경우 immer 라이브러리를 이용해 불변성을 유지하며 가독성도 개선할 수 있다.