S4) Unit 4. [React] Virtual DOM

📣  Virtual DOM

𝟭. Vertual DOM의 정의

✔️ React에 있는 가상의 DOM 객체

➰ 실제 DOM의 사본 같은 개념으로, 리액트는 실제 DOM에 접근해서 조작하는 대신 가상의 DOM 객체에 접근해서 변화 전과 후를 비교하고 바뀐 부분만 실제 DOM에 적용한다.

 

𝟮. Vertual DOM이 나오게 된 배경

✔️ DOM은 애플리케이션의 UI 상태가 변경될 때마다 해당 변경사항을 나타내기 위해 업데이트(리플로우) 되고, 이렇게 DOM을 조작하는 정도가 많아지면 성능에 영향을 미칠 수 있기 때문이다.

➰ 바뀐 부분을 하나하나 리렌더링하게 된다면 비용도 많이 들고 브라우저의 속도도 늦어지게 된다.

➰ 실제 DOM 객체와 동일한 속성을 가지고 있음에도 훨씬 가벼운 사본인 virtual DOM을 조작하게 되면 실제 DOM처럼 실제로 브라우저 화면에 그리는 것이 아니기 때문에 훨씬 속도가 빠르게 된다.

➰ 결과적으로는 바뀐 부분만 실제 DOM에 적용할 수 있게 된다.

 

𝟯. Vertual DOM의 형태

✔️ 추상화된 자바스크립트 객체의 형태를 가지고 있다.

➰ 추상화만 되었을 뿐 평범한 자바스크립트 객체이므로 실제 DOM을 건드리지 않고도 필요한 만큼 자유롭게 조작할 수 있다.

const vDom = {
	tagName: "html",
	children: [
		{ tagName: "head" },
		{ tagName: "body",
			children: [
				tagName: "ul",
				attributes: { "class": "list"},
				children: [
					{
						tagName: "li",
						attributes: { "class": "list_item" },
						textContent: "List item"
					}
				]
			]
		}
	]
}

---

📣  React Diffing Algorithm

𝟭. React Diffing Algorithm의 정의

✔️ 기존 가상 DOM과 새로운 가상 DOM을 비교할 때 사용되는 비교 알고리즘

 

𝟮. React가 DOM 트리를 탐색하는 방법

✔️ 트리의 레벨 순서대로 순회하는 방법으로 탐색한다.

➰ 같은 레벨(위치)끼리 비교하는 것 -> 너비 우선 탐색(BFS)의 일종

➰ 동일 선상에 있는 노드를 파악한 뒤 다음 자식 세대의 노드를 순차적으로 파악해 나간다.

 

1️⃣ 다른 타입의 DOM 엘리먼트인 경우

<div>
	<Counter />
</div>

//부모 태그가 div에서 span으로 바뀝니다.
<span>
	<Counter />
</span>

➰ 부모 노드였던 <div> 가 <span> 으로 바뀌면 자식 노드인 <Counter />는 완전히 해제된다.

➰ 즉, <span> 태그 속 새로운 <Counter /> 가 다시 실행되는 것이다.

➰ 기존의 컴포넌트는 완전히 해제되기 때문에 <Counter />가 갖고 있던 기존 state 또한 파괴된다.

 

2️⃣ 같은 타입의 DOM 엘리먼트인 경우

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

//기존의 엘리먼트가 태그는 바뀌지 않은 채 className만 바뀌었습니다.
<div className="after" title="stuff" />

➰ 타입이 바뀌지 않는다면 리액트는 가상 DOM을 사용해서 최소한의 변경 사항만 업데이트 한다.

➰ 업데이트 할 내용이 생기면 가상 DOM 내부의 프로퍼티만 수정한 뒤, 모든 노드에 걸친 업데이트가 끝나면 그때 최종적으로 한번만 실제 DOM으로의 렌더링을 시도한다.

 

//className이 before인 컴포넌트
<div style={{color: 'red', fontWeight: 'bold"}} title="stuff" />

//className이 after인 컴포넌트
<div style={{color: 'green', fontWeight: 'bold"}} title="stuff" />

➰ 리액트는 color 스타일만 수정하고, fontWeight 및 다른 요소는 수정하지 않는다.

➰ 하나의 DOM 노드를 처리한 뒤 리액트는 해당 노드들 밑의 자식들을 순차적으로 동시에 순회하면서 차이가 발견될 때마다 변경한다 -> 재귀적으로 처리한다

 

3️⃣ 자식 엘리먼트의 재귀적 처리

<ul>
  <li>first</li>
  <li>second</li>
</ul>

//자식 엘리먼트의 끝에 새로운 자식 엘리먼트를 추가했습니다.
<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

➰ 리액트는 위에서부터 아래로 비교하면서 바뀐 점을 찾는다.

➰ 첫 번째 자식 노드들과 두 번째 자식 노드들이 일치하는 걸 확인한 뒤 세번째 자식 노드를 추가한다.

=> 첫 번째 자식 노드를 바꾸면 리액트는 두 번째, 세 번째 자식 노드는 유지시켜도 된다는 것을 깨닫지 못하고 전부 새롭게 렌더링 한다.

=> 이 문제를 해결하기 위해 'key' 속성을 지원한다.

 

𝟯. Key

✔️ 만약 자식 노드들이 이 key를 갖고 있다면, 리액트는 그 key를 이용해 기존 트리의 자식과 새로운 트리의 자식이 일치하는지 아닌지 알 수 있다.

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

//key가 2014인 자식 엘리먼트를 처음에 추가합니다.
<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

➰ 리액트는 key 속성을 통해 2014 라는 자식 엘리먼트가 새로 생겼고, 2015, 2016 키를 가진 엘리먼트는 그저 위치만 이동했다는 걸 알 수 있다.

➰ 이 key 속성은 보통 데이터 베이스 상의 유니크한 값을 부여해주면 되는데, 전역적으로 유일할 필요는 없고 형제 엘리먼트 사이에서만 유일하면 된다 => 배열의 인덱스를 key로 사용하는 것은 비효율적으로 동작하게 한다.