Virtual DOM vs Incremental DOM

React에 익숙하다면 Virtual DOM이라는 개념에 대해 한 번쯤 들어봤을 것이다.

Virtual DOM은 UI 성능을 향상시킴으로써 React의 인기에 기여한 주요 역할 중 하나이다.

 

Angular가 2019년에 새로운 Renderer Angular Ivy를 출시했을 때 많은 사람들이 Virtual DOM 대신 Incremental DOM이라는 개념을 선택한 이유를 궁금해했다. 여전히 Angular는 Incremental DOM을 사용 중이며, Angular가 이러한 선택을 한 이유에 대해 궁금해 할 것이다.

 

Incremental DOM을 알아보기 전, 먼저 Virtual DOM에 대해 알아보자.

 

Virtual DOM 동작 방식

Virtual DOM는 UI 가상 표현을 메모리 상에 두고 재조정(Reconciliation) 과정을 통해 실제 DOM과 동기화하는 것을 말한다. 재조정 과정은 다음과 같은 3가지 단계로 구성된다.

Virtual DOM 동작 방식

1. UI가 변경되면 전체 UI를 Virtual DOM으로 렌더링한다.
2. 이전 Virtual DOM과 현재 Virtual DOM 간의 차이를 계산한다.
3. 변경된 부분을 실제 DOM에 적용한다.

Virtual DOM에 대한 기본 지식을 얻었으므로 Incremental DOM에 대해 자세히 알아보도록 한다.

 

Incremental DOM 동작 방식

Incremental DOM의 동작 방식

Incremental DOM은 코드 변경 파악을 위해 실제 DOM을 사용하여 Virtual DOM보다 더 간단한 접근 방식을 제공한다. 따라서 차이를 계산할 때 메모리상에 실제 DOM에 대한 가상 표현(Virtual DOM)이 없으며, 새로운 렌더 트리와 차이를 비교하는 데 실제 DOM이 사용된다.

 

Incremental DOM은 명령(Instruction) 묶음을 통해 모든 컴포넌트를 컴파일한다. 이 명령들은 DOM 트리를 생성하고 변경점을 찾아낸다.

 

Incremental DOM이 특별한 이유는 무엇인가?

위의 설명을 보고나면 Incremental DOM 접근 방식이 훨씬 간단하나는 결론을 내렸을 것이다.

 

하지만, Incremental DOM의 진정한 이점은 최적화된 메모리 사용이다.

 

이 최적화 방식은 휴대전화 같이 메모리 용량이 적은 장치에서 사용될 때 굉장히 좋다. 메모리 사용량을 최적화 하는 것은 쉬운 일이 아니기 때문이다. 또한 애플리케이션의 메모리 사용은 순수하게 번들 크기와 메모리 점유율(Memory footprint)에 기반한다.

 

Incremental DOM이 번들크기와 메모리 점유율을 줄이는데 어떻게 도움을 주는지 알아보자.

1. Incremental DOM은 트리 쉐이킹이 가능하다.

트리 쉐이킹(Tree-Shaking)은 새로운 개념이 아니다. 빌드 과정에서 필요하지 않는 코드를 제거하는 단계를 말한다.

Incremental DOM은 명령 기반 접근 방식을 사용하기 때문에 이를 최대한 활용한다. 앞서 언급했듯이 Incremental DOM은 컴파일 전에 명령 묶음으로 각 컴포넌트를 컴파일하고 사용하지 않는 명령을 식별하는 데 도움을 준다. 따라서 컴파일 시점에 불필요한 명령들을 제거할 수 있다.

트리 쉐이킹(Tree-shaking)

 

2. 메모리 사용량을 감소시킬 수 있다.

Virtual DOM과 Incremental DOM의 주요 차이점을 이해하고 있다면, 아래 내용을 이미 눈치 챘을 것이다.

Virtual DOM과 달리 Incremental DOM은 애플리케이션 UI를 다시 렌더링할 때 실제 DOM의 복사본(Virtual DOM)을 생성하지 않는다. 게다가 Incremental DOM은 애플리케이션 UI에 변경사항이 없으면 메모리를 할당하지 않는다. 대부분의 경우 중요한 수정 없이 응용 프로그램을 재렌더링하기 때문에, Incremental 방식을 따르면 장치의 메모리를 크게 절약할 수 있다. 

Incremental DOM에서 메모리 사용량 감소의 이유

이는 Incremental DOM이 Virtual DOM의 메모리 점유율을 줄여주는 해결 방안처럼 보인다. 하지만 왜 다른 프레임워크는 Incremental DOM을 사용하지 않을까?

 

트레이드 오프가 있다.

Incremental DOM이 차이를 계산할 때 더 효율적인 방법을 사용하기 때문에, 메모리 사용량을 줄일 수 있지만 이 방법은 Virtual DOM보다 시간이 많이 걸린다.

 

메모리 효율 : Virtual DOM < Incremental DOM

시간 효율 : Virtual DOM > Incremental DOM

 

정리 및 요약

이 두 가지 DOM(Virtual DOM, Incremental DOM) 중에서 Virtual DOM은 오랫동안 선두주자였다.  "React 때문에 Virtual DOM이 유명해졌다"고 주장할 수도 있지만, 반대로 React가 Virtual DOM을 통해 이점을 얻었다.

 

따라서 Virtual DOM이 제공하는 속도와 성능 향상은 React가 다른 라이벌 프레임워크와 경쟁하는데 큰 도움이 되었다.

 

Virtual DOM의 장단점

• 효율적인 '비교' 알고리즘(Diffing Algorithm)
• 간단하고 성능 향상에 도움이 된다.
• React 없이도 사용 가능
• 경량
• 상태 변경을 생각하지 안고 애플리케이션을 빌드할 수 있다.

 

Virtual DOM은 빠르고 효율적이지만 함정이 있다.

 

Virtual DOM에서 사용하는 '비교' 알고리즘은 실제 DOM의 작업량을 줄인다. 그리고 변경사항을 식별하기 위해 이전의 Virtual DOM을 현재 Virtual DOM 상태와 비교해야 한다. 이것을 이해하기 위해 React 코드 예를 들어보자.

function WelcomeMessage(props) { 
  return ( 
    <div className="welcome"> 
     welcome {props.name} 
    </div> 
  ); 
}

name 속성(prop)의 초기 값을 "Chameera,"로 설정한 후 "Reader"로 변경했다고 가정해보자. 전체 코드에서 변경된 부분은 name 속성뿐이고, DOM 노드를 변경하거나 <div> 태그 안에 있는 속성을 비교할 필요가 없다. 하지만 비교 방식을 사용할 경우, 변경 사항을 식별하기 위해 모든 단계를 거쳐야 한다.

 

개발 과정에서 사소한 변경 사항이 굉장히 빈번하게 일어나는 것을 알 수 있고, 이렇게 UI의 각 요소를 비교하는 일은 오버헤드가 된다. 이것이 Virtual DOM의 단점이라고 할 수 있다.

 

 

하지만 Incremental DOM을 사용하면 이러한 높은 메모리 사용량 문제를 해결할 수 있다.

 

Incremental DOM의 장단점

이전에 말했듯이, Incremental DOM은 변경사항을 추적하기 위해 실제 DOM을 사용하기 때문에, Virtual DOM에서 메모리 소비를 줄이는 솔루션을 제공한다. 이 접근 방식은 계산 오버헤드를 크게 줄이고 응용 프로그램의 메모리 사용량도 개선했다.

 

따라서 이것이 Virtual DOM보다 Incremental DOM을 사용하는 주요 이점이며 다음과 같이 Incremental DOM의 몇 가지 다른 이점을 나열할 수 있다.

• 다른 많은 프레임워크와 쉽게 통합된다.
• 간단한 API는 템플릿 엔진을 대상으로 하는데 강력한 효과를 발휘한다.
• 모바일 기기에 기반한 애플리케이션에 적합하다.

 

대부분의 경우 Incremental DOM은 Virtual DOM만큼 빠르지 않다.

 

Incremental DOM은 메모리 사용량을 줄이는 솔루션을 제공하지만 차이 계산은 Virtual DOM 접근 방식보다 더 많은 시간이 걸리기 때문에 속도가 비교적 느리다.

 

이 두 DOM 모두 고유한 장점이 있으며 Virtual DOM이 더 낫다거나 Incremental DOM이 더 낫다고 말할 수 없다. 그러나 확실한건 Virtual DOM과 Incremental DOM 모두 훌륭한 선택지이며, 동적 DOM 변경을 처리하는데 전혀 문제가 없다.

 

---

Reference

Incremental vs Virtual DOM

Incremental DOM과 Virtual DOM 비교