React의 비교 알고리즘 가정

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

비교 알고리즘

• element 타입이 다른 경우

이전 트리를 버리고 완전히 새로운 트리를 구축합니다.

<div>
  <Counter />
</div>

<span>
  <Counter />
</span>

div와 span의 요소가 달라서 div, Counter, Counter에 포함된 상태는 모두 사라지고 span을 부모로하는 새로운 트리를 생성합니다.

• DOM element 타입이 같은 경우

같은 타입의 두 리액트 DOM요소를 비교할때 리액트는 두 엘리먼트의 속성을 확인하여 변경된 속성만 갱신합니다.

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

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

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

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

각각 className과 style의 변경된 속성만 갱신합니다.

key는 전역에서가 아닌 형제 사이에서만 유일하면 됩니다.