[React] Virtual DOM

React는 변화된 부분을 실제 DOM에 바로 적용하는 것이 아닌, Virtual DOM이라고 하는 가상의 DOM에 적용 후 실제 DOM과 비교하여 바뀐 부분을 적용하는 방식으로 작동한다.

React는 기존의 가상 DOM 트리와 새롭게 변경된 가상 DOM 트리를 비교할 때, 같은 레벨끼리 비교하는 BFS(너비 우선 탐색)방식을 사용한다.

다른 종류의 DOM 엘리먼트로 바뀌는 경우

<div>
	<Counter />
</div>

// div 태그가 span 태그로 변경됨
<span>
	<Counter />
</span>

부모 태그가 바뀌면 React는 기존의 트리를 버리고 새로운 트리를 구축하기 때문에 이전의 DOM 노드들은 전부 파괴되고, <Counter />가 가지는 State 또한 파괴되기 때문에 주의해야 한다.

DOM 엘리먼트의 종류가 같은 경우

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

// className이 변경됨, className에 따라 적용되는 스타일이 다르다고 가정
<div className="after" title="stuff" />

태그는 같지만 className에 따라 적용되는 스타일이 다른 경우, React는 변화가 있는 스타일만 정확히 변경하고, 계속해서 다음 노드들을 탐색하며 비교한다.

키(key)
<ul>에 새로운 <li>가 기존 리스트의 앞쪽에 추가되는 경우, React는 기존의 맨 처음 리스트가 변경된 것으로 감지하고 리스트 전체가 바뀌었다고 여긴다. 뒤의 리스트들이 변화가 없더라도 React는 전부 버리고 새롭게 렌더링하게 된다.

<ul>
  <li key="1">Duke</li>
  <li key="2">Villanova</li>
</ul>

//key가 0인 리스트를 맨 앞에 추가
<ul>
  <li key="0">Connecticut</li>
  <li key="1">Duke</li>
  <li key="2">Villanova</li>
</ul>

이러한 문제를 해결하기 위해 React는 key속성을 지원한다. 리스트들이 key를 갖고 있다면, React는 그 key를 이용해 기존 트리의 자식과 새로운 트리의 자식이 일치하는지 아닌지 확인할 수 있다.

• key값은 일반적으로 데이터 베이스 상의 Id와 같은 유니크한 값으로 한다.
• key값은 전역적으로 유일할 필요는 없고, 형제 엘리먼트 사이에서만 유일하면 된다.