[💻 코드스테이츠 FE 44기] React 심화 - Virtual DOM

✔️ 시작

React에 대해 좀 더 심화적인 부분에 학습했다.

---

✏️ 배운 것

React는 UI의 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트할 수 있도록 가상 DOM이라는 가상의 DOM 객체를 활용한다.

가상 DOM이 생기게 된 이유는 이전 DOM으로 부터 거슬러 올라가야한다.

DOM(Document Object Model)

• 문서 객체 모델을 의미한다.
• DOM은 브라우저가 HTML 문서를 조작할 수 있도록 트리 구조화한 객체 모델이다.
• DOM은 계층적 형태의 트리 구조로 구정되어 있다. 자료구조 중에서도 트리는 정장된 데이터를 더 효과적으로 탐색하기 위해 사용 되어, 빠른 자료 탐색 성능이 장점인 자료구조라고 볼 수 있다.

그러나 DOM이 변경되고 업데이트가 된다는 것은 결국 브라우저의 렌더링 엔진 또한 리플로우(Reflow)한다는 뜻이다.

리플로우?

• 브라우저가 요소의 레이아웃을 다시 계산하고 화면에 반영하는 과정
• 리플로우는 성능에 영향을 미칠 수 있는 비용이 큰 작업이다.

즉, 변경사항이 생겼을 경우 그 변경사항만 변경 되는게 아닌 나머지 영역도 다시 만들어진다는 문제가 있다.

Virtual DOM

• JavaScript 객체로 이루어진 가상의 DOM 트리를 사용해, 실제 DOM 조작을 최소화하고 성능을 최적화하는 기술이다.

• 가상 DOM은 실제 DOM과 동기화되어, 상태가 변경될 때 마다 가상 DOM을 새로 생성해 이전 상태와 비교한다. 비교 후 변경이 필요한 부분만 실제 DOM에 반영해 업데이트하기에 기존 영역을 다시 만들 필요가 없다.

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

• diffing 알고리즘을 통해 이전 상태와 현재 상태의 가상 DOM을 비교한다.

Virtual DOM은 빠르다?

가상 DOM은 실제 DOM을 직접 조작하는 것보다 빠르다는 것이 맞지만, 모든 경우에 그렇지는 않다.
때로는 직접 DOM을 조작하는 것이 더 빠를 수 있다.
실제 DOM 조작이 느려지는 대부분의 경우는 DOM 조작이 발생할 때마다 브라우저에서 다시 레이아웃을 계산하고, 페이지를 다시 그리기 때문이다.

좋은 프론트엔드 개발자가 되기 위해선 작성하는 코드가 렌더링에 어떤 영향을 미칠지를 고려하여 최적화 작업에도 관심을 기울여야 한다고 한다.

React Diffing Algorithm

• React는 두 가지의 가정을 가지고 시간 복잡도 O(n)의 새로운 휴리스틱 알고리즘(Heuristic Algorithm)을 구현 한다.

휴리스틱 알고리즘(Heuristic Algorithm)?

• 가상 DOM 업데이트 과정에서 사용되는 비교 알고리즘
• 효율적인 가상 돔을 업데이트하기 위해 사용한다.

두가지 가정

1. 각기 서로 다른 두 요소는 다른 트리를 구축할 것이다.
2. 개발자가 제공하는 key프로퍼티를 가지고, 여러 번 렌더링을 거쳐도 변경되지 말아야 하는 자식 요소가 무엇인지 알아낼 수 있을 것이다.

React는 비교 알고리즘(Diffing Algorithm)을 사용한다.

React는 기존의 가상 DOM 트리와 새롭게 변경된 가상 DOM 트리를 비교할 때
트리의 레벨 순서대로 순회하는 방식으로 탐색한다. (같은 레벨(위치)끼리 비교한다 - 너비 우선 탐색(BFS)의 이종이라 볼 수 있다.)

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

• DOM 트리는 각 HTML 태그마다 각각의 규칙이 있어 자식 태그가 한정적이라는 특징이 있다.
  (ex - ul, ol에는 li, p태그 안에 p태그 사용 못 함 등)
• 즉, 이러한 특징으로 부모 태그가 달라진다면 React는 이전 트리를 버리고 새로운 트리를 구축한다.

<div>
	<Counter />
</div>

//부모 태그가 div에서 span으로 변경
<span>
	<Counter />
</span>

• 기존 트리는 버리고 새로운 트리로 구축하기에 이전의 DOM 노드들은 전부 없어져 버린다.
  기존의 컴포넌트는 완전히 해제(Unmount)되어 버리기에 <Counter />가 갖고 있던 기존의 state도 같이 없어져 버린다.

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

• 타입이 변경되지 않을 경우 최대한 렌더링 하지 않는 방향으로 최소한의 변경 사항만 업데이트한다.
• 변경 사항이 생길 경우 가상 DOM내부의 프로퍼티만 수정한 뒤, 모든 노드에 걸친 업데이트가 끝나면 그 때 한 번만 실제 DOM으로 렌더링을 시도한다.

<div className="before"  />

//className만 변경되었다.
<div className="after" />

두 엘리먼트를 비교했을 때 React는 정확시 className이 변경 되었음을 눈치 챈다.
나머지는 수정하지 않고 className만 수정한다.

하나의 DOM 노드를 처리한 뒤 React는 뒤이어 해당 노드들 밑의 자식들을 순차적으로 동시에 순회하면서 차이가 발견될 때 마다 변경한다. 이를 재귀적으로 처리한다고 표현한다.

자식 엘리먼트의 재귀적 처리

<ul>
  <li>1</li>
  <li>2</li>
</ul>

//자식 엘리먼트를 처음에 추가할 경우
<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ul>

이렇게 변경사항을 처음에 배치할 경우 React는 처음의 노드 부터 비교하기 때문에 처음의 자식 노드를 비교할 때 자식 노드가 서로 다르다고 인지하게 되어 리스트 전체가 바뀌었다고 판단한다. 나머지는 그대로 이지만 그 부분을 인지하지 못하고 전부 새롭게 렌더링해버리는 비효율적인 동작을 한다.

이를 해결하기 위해 key라는 속성을 지원한다.
개발 할 때 key라는 속성을 추가하지 않아 오류가 뜰 때가 있을 거다. 그 오류 이때문이다.

키 (key)

만약 자식 노드들이 key를 갖고 있다면 React는 해당 key를 이요해 기존 트리의 자식과 새로운 트리의 자식이 일치하는지 아닌지 확인할 수 있다.

map()메서드를 할 때 key값이 필요한 이유도 여기에 있는 것 같다.

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

//key가 0인 자식 엘리먼트를 처음에 추가할 경우
<ul>
  <li key="0">0</li>
  <li key="1">1</li>
  <li key="2">2</li>
</ul>

React는 key 속성을 통해 0이라는 자식 엘리먼트가 새롭게 생겼고 나머지 key를 가진 엘리먼트는 그저 위치면 변경되었다는걸 알게 되어 다른 자식 엘리먼트는 변경하지 않고 추가된 엘리먼트만 변경한다.

key속성에는 보통 데이터 베이스 상의 유니크한 값(ex - id)을 부여해 준다.
그 값은 전역적으로 유일할 필요는 없으나 형제 엘리먼트 사이에서는 유일해야한다.

만약 유니크한 값이 없을 경우 배열의 인덱스를 key 값으로 사용하기도 한다. 하지만 이는 배열이 다르게 정렬될 경우가 있을 경우 비효율적으로 동작될 수도 있다.

---

📍 마치며

React가 어떻게 동작하는 방식이로 어떤식으로 렌더링하는지 자세히 알게 되었다.
또한 key값을 왜 부여하는지도 이번 학습을 통해 알게 되었다.

항상 map으로 값을 보여줄 때 key값을 부여한다는 이유도 여기에 있는 듯 싶다.

최대한 id를 key값으로 사용하되 대체할 값이 없을 경우 id를 사용한다는 점을 참고해야겠다. 물론 이게 완전한 답은 아닌 점도 같이 알아두어야겠다.

다른 Hook의 대한 내용도 배웠지만 내용이 길어질 것 같아 분할해 정리할 예정이다.