React에서 불변성을 지켜야하는 이유

불변성이란?

불변성이란 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만드는 것을 말한다.

JS에서의 불변성

우선 아래 코드로 자바스크립트에서 불변성에대해 알아보자.

const userA = {
  name: '호롤롤',
  phone: '000-0000-0000',
  address: '대한민국 어딘가',
};

const userB = userA;

userA.name = 'ㅋㅋㅋㅋ';

console.log(userA.name); // result: 'ㅋㅋㅋㅋ'
console.log(userB.name); // result: 'ㅋㅋㅋㅋ'

userA.name을 변경 했는데 userB.name도 같이 바뀌었다.

(불변성이 잘 지켜지지 않았다 - userA의 메모리 주소와 userB가 가르키는 메모리 주소 값이 같기때문).

이런 상황은 값을 예측할 수 없게 하거나 예기치 못한 버그를 유발할 수 있다.

불변성을 유지하는 방법

spread operator(얕은복사)를 사용해 새로운 객체를 생성해서 사용한다.

const userB = { ...userB };

 

그러나 spread operator를 사용하더라도 객체의 깊이가 깊어지면 똑같은 문제가 생긴다.

const userA = {
  name: '호롤롤',
  phone: '000-0000-0000',
  address: '대한민국 어딘가',
  post: ['호', '롤', '롤'],
};

const userB = { ...userA };

const userC = {
  ...userA,
  post: [...userA.post],
};

// userA === userB -> false
// userA.post === userB.post -> true
// userA.post === userC.post -> false

때문에 깊이가 점점 깊어지면 불변성 유지가 힘들어져 immer등의 라이브러리를 사용해 불변성을 유지하기도 한다.

React에서의 불변성

이제 리액트에서 불변성을 지켜줘야하는 이유를 알아보자

 

컴포넌트 리렌더링

컴포넌트가 리렌더링 되는 조건은 다음과 같다.

---

1. 부모 컴포넌트가 리렌더링 되었을 때

2. props 값이 변경되었을 때

3. 상태값이 변경되었을 때

---

렌더링을 위한 값 변경 감지

리액트에선 props와 상태 변경 감지를 위해 이전 값과 현재 값을 하나씩 비교하지 않고 성능 최적화를 위해 얕은 비교를 실행한다.

const [user, setUser] = useState({
  name: '호롤롤',
  phone: '000-0000-0000',
});

user.name = '로로로';
setState(user);

위 코드를 보면 상태 값을 직접 변경하고 setUser를 실행 시켰다. setUser가 실행되면 리액트는 현재 값과 전달 받은 값을 비교하는데 이때 얕은 비교를 실행하기 때문에 값이 변경되었다고 판단하지 않는다.

결론

불변성을 지키지 않으면 리액트는 값 변경을 감지하지 못하고 당연히 리렌더링도 되지 않는다.

또한 값을 예측할 수 없거나 예기치 못한 버그를 유발 할 수 있다.