React의 경우, Reconciliation을 사용합니다.React의 Reconciliation은 변경 전과 변경 후의 엘리먼트 노드에 대해 디핑(diffing) 비교 알고리즘을 수행합니다.
하지만 일반적의 경우 디핑 알고리즘은 O(n^3)의 시간복잡도를 가지고 있으며, React에 이 알고리즘을 적용한다면, 1000개의 엘리먼트 노드에 대해 알고리즘을 수행할 경우 10억 번의 비교연산을 수행해야합니다.
React는 대신 다음 두 가지 가정을 기반하여 O(n)의 시간복잡도를 가지는 휴리스틱 알고리즘을 구현했습니다.
1.
서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다.
2.
개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해줄 수 있다.
이러한 처리로, 일반 디핑 알고리즘에 비해 현저히 낮은 비용으로 비교 및 UI 렌더링이 가능하다.
아무리 react의 재조정 알고리즘이 훌륭해졌다고 하지만… O(n)도 여전히 큽니다. 노드를 백만 개 가까이 다뤄야 한다면 말이죠. 그래서 react에서는 컴포넌트 라이프 사이클에 렌더링을 차단할 수 있는 옵션을 제공하고 있습니다. 바로 ShouldComponentUpdate 함수입니다.
이 함수는 컴포넌트가 업데이트 할지 말지를 boolean 값으로 결정하게 해 줍니다. 기존 props와 업데이트 될 state를 비교한 뒤 컴포넌트 업데이트 여부를 결정하게 하는 거죠. 만일 개발자가 “이 컴포넌트는 절대 업데이트 될 일이 없을 거야”라고 생각된다면, 그냥 return false 를 지정하면 됩니다. 그러면 해당 컴포넌트는 어떤 경우에도 업데이트되지 않죠.
업데이트 여부를 어떻게 결정해야 할지 까다롭다면, PureComponent 혹은 React.memo 를 사용할 수도 있습니다. PureComponent는 개발지를 대신해 ShouldComponentUpdate를 어떻게 할지 미리 결정해 놓은 컴포넌트입니다. ‘얕은 비교 shallow-compare’를 통해 기존 값과 새 값이 원시 값의 경우 동일하거나, 객체 프로퍼티 값의 경우 레퍼런스가 동일하다면 업데이트를 수행하지 않습니다. React.memo는 함수형 컴포넌트에서도 PureComponent 의 효과를 낼 수 있도록 도와주는 HOC입니다.