재조정(Reconcillation)

• 리액트는 선언적 API 를 제공하므로, 갱신 될 때마다 무엇이 바뀌었는지 걱정할 필요가 없다.
• 그렇담 어떻게 처리하는걸까?

1. 업데이트 한 전체 UI를 VDOM에 반영한다.
2. 실제 돔과 생성된 버츄얼 돔을 비교한다. 이 때 Diffing Algorithm을 사용한다.
3. 바뀐 부분만 실제 DOM 에 적용한다.

재조정이란

• 기존의 버츄얼 돔과 변경사항이 생긴 버츄얼 돔의 비교작업을 말한다.

• 컴포넌트의 prop 이나 state 가 변경될 때, 직전에 렌더링된 요소와 새로 반환된 요소를 비교하여 두 엘리먼트가 일치하지 않는다면, 리액트는 새로운 요소를 DOM 에 업데이트하는데, 이러한 프로세스를 일컫는다.

• 실제로 모든 DOM 트리를 순회하며, 탐색 변경하는 과정을 거쳐야하는데, 지금까지 알려진 알고리즘은 O(n^3)의 시간복잡도를 가지므로, 1000개의 요소를 표시하려면 무려 10억번 비교가 된다.

• 따라서 리액트는 대신 아래 두 가정에 따른 휴리스틱 알고리즘을 채택

  1. 서로 다른 타입의 두 요소는 서로 다른 트리를 만들어낸다.
  2. key prop 을 사용하여 다른 렌더링 사이에 어떤 자식 엘리먼트가 변경되지 않아야할지 안정적인 자식요소에 대한 힌트를 얻을 수 있다.