React의 API의 선언적 특성으로 인해 보이지 않는 내부 알고리즘에 대한 설명.

비교(diffing)에 대한 설명하겠다.

동기

트리가 변했는 지 체크하는 알고리즘은 n개의 Element가 있을 때 O(n3)의 복잡도를 갖는다. 이 알고리즘을 O(n)으로 만들기 위해 다음을 가정한다.

1. 서로 다른 타입의 두 엘리멘트는 서로 다른 트리를 만들어 낸다.
2. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해준다.

비교 알고리즘

비교는 루트 엘리먼트부터 시작.

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

이전 트리는 버리고 새로운 트리 구축

완전히 다른 인스턴스가 생김 ⇒ componentWillUnmount(), componentDidMount(),이전 state 삭제

<div>
  <Counter />
</div>

<span>
  <Counter />
</span>

Counter 컴포넌트는 삭제 후 재렌더링 됨.

DOM 엘리먼트의 타입이 같은 경우

같은 타입의 두 React DOM 엘리먼트를 비교할 때, 두 엘리먼트의 속성을 비교하여 나머지는 유지하고 변경된 속성만 변경한다.

<div className="before" title="stuff" />

<div className="after" title="stuff" />  // className만 변경

<div style={{color: 'red', fontWeight: 'bold'}} />

<div style={{color: 'green', fontWeight: 'bold'}} />  // fontWeight는 두고 color만 변경

나머지 자식들은 재귀적으로 처리