[REACT] 불변성의 중요성

지금까지 리액트를 공부하면서 불변성이 중요하다, 중요하다 들어왔다.

 

그런데 왜 중요한지 모르고 있었는데 지금에서야 알게 되었다.

 

리액트는 변화를 감지하여 그 부분만 리렌더링 해줌으로써 그 장점이 큰 프레임워크다.

 

따라서 변화를 감지하기 위해서는 이전값과 현재값이 필요하다.

 

이전에는 12였는데 지금은 13이 되었다면 변화한 것이 맞다.

 

 

 

그런데 JS의 특성상

let array = [1,2,3];

이 있을 때,

 

let array2 = array;

array2.push(4);

라고 한다면

 

array2에만 4가 더해지는게 아니라 기존 array에도 더해지는 것이다.

불변성이 파괴되고, 값을 비교할 수 없다.

 

저렇게 되면 리액트에서 변화를 감지할 수 없기 때문에, 불변성을 잘 지켜줘야 한다.

 

따라서 전개연산자(...)를 사용해줘야 한다. 예를 들어

let array3 = [...array];

이렇게 해야한다.

 

 

 

하지만 이것도 얕은 복사에 해당한다.

1계층, 2계층 더 들어갈 수록 복사를 하려면 하나하나 깊이 해주어야 한다. 사실상 불가능에 가깝다.

 

이를 도와주기 위해 immer라는 라이브러리가 있다.