[React] React에서 불변성이 왜 중요할까?

리액트의 상태관리에서 불변성을 지키라는 말 한번은 꼭 들어봤을 것이다. 

왜 불변성을 지켜야하는 지에대해서 공부해 보았다.

 

리액트에서 불변성이란 기존의 값을 직접 수정하지 않고 새로운 값을 만들어 수정하는 것을 뜻한다.

 

const [numberArray, setNumberArray] = useState([]);

const plusArray = (e) => {
	setNumberArray([...numberArray, e.target.value]);
}

배열을 관리하는 set함수를 사용할 때 setNumberArray처럼 기존 numberArray를 직접 수정하지 않고 새로운 배열을 만들어서 수정해준다. 

 

아래의 예시코드로 불변성을 어떻게 지키는지 알아보자

const arrayA = [1,2,3,4,5];
const arrayB = arrayA;

arrayB[0] = 10;

console.log(arrayA === arrayB) // true

arrayB에 arrayA를 할당해주었지만 arrayB에 전달해준 것은 arrayA 배열의 주소값이다.

즉 arrayB는 arrayA의 배열을 가르키고 있는 것이다.

 

그러므로 arrayA === arrayB는 true 라고 할 수 있다.

 

 

const arrayA = [1,2,3,4,5];
const arrayB = [...arrayA];

arrayB[0] = 10;

console.log(arrayA === arrayB) // false

이번에는 arrayB에 새로운 배열을 만들어서 arrayB에게 할당해주었기 때문에 arrayA === arrayB는 false라고 할 수 있다.

 

이런 방식으로 객체도 똑같은 결과를 나타낼 것이다.

 

불변성을 지키지 않으면 내부의 값이 변하더라도 바뀐 것을 감지하지 못하기 때문에 불변성을 지켜야 한다.

 

추가로 스프레드문법(... 문법)을 사용해서 객체나 배열을 복사할 때 얕은 복사를 하게 된다.

내부의 값을 똑같이 복사하는게 아니라 가장 바깥쪽의 값만 복사하게 되어서 내부의 값까지 따로 복사를 해주어야한다.

 

그래서 나는 객체나 배열을 복사할 때는 useState를 사용하는 것 보다 useImmer를 자주 사용한다.