[React🩵] 리액트의 리렌더링과 불변성

 

어느날 스프레드 연산자를 사용한 코드를 보다가 문득 든 생각

 

스프레드 연산자를 사용하면 기존의 배열을 모두 가져오게 되는데, 왜 굳이 다 가져와야할까?
배열에서 원하는 요소만 이벤트를 주려면 id를 비교해서 해당 값만 변경하는 것이 더 효율적인 방법 아닐까?

 

라는 의문이 들었다

 

 

 

그 이유는 리액트는 상태가 변했을 때 리렌더링하기 때문이다

새 배열을 전달 받아야만 "이 배열이 이전과 다른 배열이구나" 하고 인식을 하게 된다

 

 

그럼 여기서 또 든 의문...

 

왜 굳이 모든 값을 가져와서 새로운 배열을 만들어줘야할까?

 

 

 

 

그 이유는 "불변성(immutability)" 때문인데 완전히 새로운 배열을 전달해야 리렌더링이 일어난다

 

 

변경이 없는 부분까지 불필요하게 새로 만드는 것이 더 비효율적인 방법이 아닐까??
리액트는 왜 굳이 불변성을 기준으로 삼는거지????

 

 

 

 

그 이유는 리액트가 얕은 비교(shallow compare)를 실행하기 때문이다

리액트는 객체의 주소(참조)를 기준으로 리렌더링을 일으킨다. 이를 얕은 비교(shallow compare)라고 한다

객체의 주소값 만을 비교하기 때문에 깊은 비교(deep comparison)가 일어나지 않는다

 

 

리액트는 대규모 UI를 빠르게 그리는걸 목표로 한다

깊은 비교를 사용하게 되면 크고 복잡한 데이터 구조를 일일이 비교해야 한다

→ 느려짐
→ 렌더링이 자주 일어나면 큰 병목이 생김

 

 

 

그래서 map, spread operator. setTodo[...] 같은 패턴이 기본이 된 것이다