본문으로 건너뛰기

Reconciliation

virtul dom을 사용하는 react가 실제 돔에 변경사항을 반영하는 로직

  1. 상태 변화가 발생 시, React는 해당 컴포넌트 및 자식 컴포넌트를 재실행
  2. 갱신된 상태를 기반으로 새로운 가상 DOM을 생성
  3. 이전 가상 DOM과 새로 생성된 가상 DOM을 비교
    1. 트리 구조를 순회하면서 새로 변경된 부분을 식별
    2. 해당 부분 알고리즘이 o(n^3)라서 가정을 사용
    3. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다.
    4. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시
      1. 위 이유로, 엘리먼트의 독립적인 값이 들어가야함.
  4. 변경 사항을 실제 DOM에 업데이트

주의 사항​

엘리먼트의 타입이 다른 경우​

해당 엘리먼트부터 파괴하고 새로 트리를 생성(아래로 전부 unmount) - 같을 경우에는 변경된 내용만 업데이트(rerendering)

key props​

배열로 컴포넌트를 렌더링 하는 경우는 매우 흔한데, key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인

key가 변경 되지 않으면 그 컴포넌트는 다시 실행하지 않음

배열의 인덱스를 key로 사용하면 재배열되는 경우 비효율적으로 동작

참조​