React Virtual Dom 과 Vue Virtual Dom 비교

📍  React Virtual Dom 이랑 Vue Virtual Dom 차이가 뭐에요 ?

 

같이 공부하는 친구의 질문에 말문이 막혔다.

가상돔이 운영되는 방식이 거기서 거기 아닐까..?

라는 애매모호한 답변을 하기 싫어서 공부하게 되었다.

 

 

📍  Vue / Compiler-Informed Virtual Dom

 

나는 막연하게,

초기 렌더링 과정이 Vue 가 React 보다 더 빠르다고는 알고 있었다.

 

왜 ? 에 대한 답변으로,

Vue 는 <template> 문법을 사용하고

React 는 .jsx 문법을 사용하니까

변환되는 과정이 Vue 가 상식적으로 더 빠르지 않을까 ? 라고 생각했다.

 

Vue 의 렌더링 메커니즘

 

공식 문서를 보면  잘 나와있지만 내가 이해한 대로 설명해보겠다.

Vue 컴포넌트가 mount 될 때, 다음과 같은 과정이 발생한다.

1️⃣ 컴파일

기본 템플릿 문법이 컴파일 과정을 거쳐 렌더 함수(코드)가 된다.

렌더 함수는 가상 DOM 트리를 반환하는 함수다.

빌드 과정을 통해 미리 실행되거나,

런타임 컴파일러를 사용해 즉석에서 실행할 수도 있다.

 

※ 주의

컴파일 과정 없이 렌더 함수를 직접 작성할 수도 있다. 렌더 함수 & JSX

(나는 여기서 React 의 컴포넌트가 정적 분석없이 변경점에 따라

관련 컴포넌트의 모든 요소가 재렌더링되겠구나 라는 걸 어렴풋이 짐작했다.)

JavaScript 로 매우 동적인 로직을 생성할 수 있기 때문에 유용하지만
Vue 는 기본적으로 템플릿 문법을 권장한다.

📍  Vue 는 왜 템플릿을 권장할까 ?

1. 템플릿 문법은 실제 HTML 에 더 가깝다.
그렇기 때문에 웹 접근성면에서도 우수하고 디자이너가 쉽게 이해하고 수정할 수 있다.
예전부터 강조해왔지만 퍼블리셔와의 협업에 아주 우수하다.

2. 템플릿 문법은 정적으로 분석하기 더 쉽다.
템플릿 컴파일러는 컴파일 시간 최적화를 이뤄내기 쉽다.
가상 DOM 성능 향상은 덤.

 

 

2️⃣ 마운트

런타임 렌더러는 렌더 함수를 호출하고, 반환된 가상 DOM 트리를 탐색한다.

이를 기반으로 실제 DOM 노드를 생성한다.

 

3️⃣ 패치

마운트 중에 사용된 의존성이 변경되면 이펙트가 다시 실행된다.

런타임 렌더러는 의존성(종속성)을 추적하여
업데이트 된 새로운 가상 DOM 트리를 생성한다.

이전 트리와 새 트리 간 차이를 비교하고 업데이트를 실제 DOM 에 적용한다.

 

---

 

즉, React 와 컴포넌트 mount 시 큰 차이점은

컴파일 과정을 통해 컴포넌트를 정적으로 분석하는 단계가 존재한다는 점이다.

 

React 와 대부분의 다른 가상 DOM 구현은 순전히 런타임이다.

Reconciliation(조정) 알고리즘에 할당되는 가상 DOM tree 에 대한

정확성을 보장하기 위해 트리를 완전히 탐색하고 모든 가상 노드의 props 를 비교해야 한다.

어떤 부분이 어떻게 변경되었는지, 조정 알고리즘은 알 턱이 없기 때문이다.

변경되었다는 사실만 알 뿐이다.

 

때문에 트리의 일부는 아예 변경되지 않았는데도

다시 렌더링 할때마다 새로운 가상 노드를 생성하기 때문에 메모리 낭비가 생긴다.

 

Vue 는 컴파일러와 런타임 모두 제어한다.

컴파일러는 템플릿을 정적으로 분석하고,

생성된 코드(렌더 함수)에 힌트를 남겨 런타임이 가능할 때

수정이 필요한 부분만 재랜더링되게끔 "바로 가기"를 지원한다.

(솔직히 여기서 놀랐다. Vue 가 더 가볍고 빠른 주요한 이유..)

 

---

 

Vue 템플릿 컴파일러가 수행하는 최적화 방법

 

1. 정적 호이스팅

 

<div>
  <div>foo</div> <!-- 호이스트 됨 -->
  <div>bar</div> <!-- 호이스트 됨 -->
  <div>{{ dynamic }}</div>
</div>

 

템플릿에는 동적 바인딩이 포함되지 않은 부분이 꽤 많다.

foo 와 bar 처럼 정적인 엘리먼트는 가상 노드(vnode) 를 다시 생성하고 비교할 필요가 없다.

 

Vue 컴파일러는 vnode 생성 함수(렌더 함수) 호출 시

자동으로 호이스트(hoist)하여 모든 렌더에서 동일한 vnode 를 재사용한다.

렌더러는 이전 vnode 와 새 vnode 가 동일하면 비교 건너뛰기 때문에 아주 굿

 

또한 정적 엘리멘트가 충분히 연속적으로 존재하면

해당 노드들에 대해 단일 정적 vnode 로 압축시켜버린다고 한다.

이러한 정적 vnode 는 innerHTML 로 마운트 된다.

해당 DOM 는 초기 마운트 시 캐싱되어

다른 곳에서 재사용될 때 cloneNode() 사용해서 새 DOM 노드를 생성한다. (효율 굿)

 

 

2. 패치 플래그

 

<!-- class만 바인딩 -->
<div :class="{ active }"></div>

<!-- id와 value만 바인딩 -->
<input :id="id" :value="value">

<!-- text만 only -->
<div>{{ dynamic }}</div>

 

Vue 는 vnode 생성 호출에서 각 엘리먼트에 필요한 업데이트 유형만 인코딩한다.

또한 하나의 엘리먼트는 여러 패치 플래그를 가질 수 있다.

📍  패치 플래그 종류

- TEXT (1) : 텍스트(콘텐츠) 변경 플래그
- CLASS (2) : 노드 class 변경 플래그
- STYLE (4) : style 변경 플래그 (인라인 스타일만 갱신 가능)
- PROPS (8) : props 변경 플래그
- FULL_PROPS (16) : props 일괄 변경 플래그
- HYDRATE_EVENTS (32) : 이벤트 필수 적용 플래그 (feat. SSR)
- STABLE_FRAGMENT (64) : 내부 노드 순서 고정 플래그
- KEYED_FRAGMENT (128) : 내부 노드 순서 고정 플래그 (키 있음)
- UNKEYED_FRAGMENT (256) : 내부 노드 순서 미고정 플래그 (키 없음)
- NEED_PATCH (512) : 재패치가 필요함을 알리는 플래그
- DYNAMIC_SLOTS (1024) : 슬롯 패치 (동적으로 교체되니까)

 

패치 플래그는 의존성 수정이 발생했을 때

해당 DOM 의 업데이트 유무를 결정할 때 도움을 준다.

 

 

3. 트리 병합

 

개념적으로 "블록(block)" 이란 내부 구조가 안정적인 템플릿을 말한다.

즉, 전체 템플릿에 v-if 및 v-for 과 같은 구조적 디렉티브를 포함하지 않는 형태를 말한다.

 

<div> <!-- 루트 블록 -->
  <div>...</div>         <!-- 추적하지 않음 -->
  <div :id="id"></div>   <!-- 추적함 -->
  <div>                  <!-- 추적하지 않음 -->
    <div>{{ bar }}</div> <!-- 추적함 -->
  </div>
</div>

 

정적인 엘리먼트는 제외하고 동적인 하위 노드만 포함된 병합 배열을 생성한다.

이 컴포넌트를 다시 렌더링해야 할 때 전체 트리 대신, 병합된 트리만 탐색하면 된다. wow

가상 DOM reconciliation 중에 통과해야하는 노드 수를 크게 줄인다.

 

<div> <!-- 루트 블록 -->
  <div>
    <div v-if> <!-- if 블록 -->
      ...
    <div>
  </div>
</div>

 

v-if 및 v-for 디렉티브는 새 블록 노드를 생성한다.

자식 블록은 부모 블록의 동적 자손 배열 내에서 추적된다.

 

 

📍  React / Virtual Dom

 

가상 DOM 이란 ?

 

메모리에 보관된 UI 의 가상 구현체가

React DOM 과 같은 라이브러리에 의해 실제 DOM 과 동기화되는 프로그래밍 개념

In React world, the term “virtual DOM” is usually associated with "React elements" since they are the objects representing the user interface. React, however, also uses internal objects called “fibers” to hold additional information about the component tree. They may also be considered a part of “virtual DOM” implementation in React.

 

 

React Fiber 이란 ?

 

Fiber 는 React 16의 새로운 Reconciliation 엔진이다.

가상 DOM 의 렌더링 성능을 높이기 위해 도입되었다.