Virtual DOM

리액트의 기본 설명에 추가적으로 Virtual DOM은 매우 중요한 내용이라 생각하기에, 한번 더 상세하게 정리해보려 합니다.

React의 작동 원리에서 리렌더링을 돕기 위한 효율적인 방법으로 Virtual DOM을 사용한다고 말씀 드렸습니다.

 

우선 DOM이란 무엇일까 ?

DOM 이란 문서 객체 모델( Document Object Model ) 의 약자로HTML, XML 문서의 프로그래밍 interface 입니다.

쉽게 이해하자면 HTML 문서의 태그들을 JavaScript가 접근하고 이용할 수 있도록 Object의 형태로 만든 것을 DOM이라고 합니다.

DOM은 위의 이미지와 같이 각 태그들의 포함 여부를 통한 부모 자식관계의 Tree 자료구조로 이루어져 있습니다. 우리는 위의 DOM Tree 정보를 통해 JavaScript를 이용하여 각 트리의 Element 에 접근할 수 있는 것입니다.

 

왜 DOM이 필요한가 ?

대부분의 만들어진 홈페이지에서 마우스 클릭과 키보드 이벤트 등은 모두 HTML의 태그에 JavaScript를 통해 이벤트를 생성하여

등록하는 방식으로 작동하게 됩니다. 이벤트를 HTML 태그에 등록하기 위해서는 우선 접근할 HTML 태그가 어디에 위치해 있는지를

알아야 할 필요가 있고 이러한 정보를 얻기 위해 DOM이라는 것을 사용합니다.

 

DOM 조작의 비효율성

예전의 웹페이지에서는 한 페이지가 표현하는 데이터의 크기가 크지 않았습니다. 하지만 점점 시간의 흐름에 따라 한 페이지에 담을 수 있는 데이터의 크기는 대폭 증가하게 되었고, 그 무게 또한 무거워지게 되었습니다. 

네이버 메인 화면의 로딩 시간과 용량

이러한 상황에서 어떤 포스터를 클릭하거나 포스터에 댓글을 달았을 때 모든 페이지를 다시 렌더링 하면서 DOM을 다시 그리는 것은 매우 비효율적이라는 생각에 도달하게 되었습니다. 또한 최근에는 SPA( Single Page Application ) 의 등장으로 하나의 HTML 문서를

기반으로 JavaScript를 통해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션의 등장으로 더더욱 모든 DOM을 바꿔야하는

낭비를 없앨 필요가 있었습니다.

 

그래서 다시 렌더링 할 필요가 있는 DOM 요소만 골라내어 리렌더링 하자 라는 발상의 Virtual DOM 이라는 기술이 등장하게 되었습니다.

 

Virtual DOM 이란 ?

Virtual DOM 이란 실제의 DOM을 모방하는 형태로 메모리 상에서만 존재하는 가상의 DOM을 의미합니다. 무언가 페이지에 변화가 있을 때 실제 DOM에 바로 적용하는 것이 아닌, 우선 Virtual DOM에 먼저 변화된 정보를 저장한 다음 실제 DOM과의 비교를 통해 필요한 정보만 변경을 하는 것입니다. 위의 방식을 사용하는 이유는 메모리 상의 정보를 바꾸는 시간보다 홈페이지에 실제 렌더링 하는데 걸리는 시간이

매우 느리기 때문입니다.

 

1 ) JavaScript 객체를 이용합니다.

2 ) 메모리 상에서 동작하기 때문에 더 빠르게 동작합니다.

3 ) 실제 렌더링이 되는것이 아니기 때문에 비용이 훨씬 적게 듭니다.

 

Virtual DOM의 비교 알고리즘( Diffing Algorithm )

두 개의 트리를 비교할 때, React는 두 엘리먼트의 Root 엘리먼트부터 비교하기 시작합니다.

이후의 동작은 엘리먼트의 타입에 따라 달라집니다.

 

1) 엘리먼트의 타입이 다른 경우

두 루트 엘리먼트의 타입이 다를 경우에는 React는 기존의 트리를 버리고 완전히 새로운 트리를 구축하게 됩니다.

<div>
  <Counter />
</div>

=====

<span>
  <Counter />
</span>

예를 들어, 위와 같은 변화가 일어나게 된다면 이전의 Counter는 사라지고 새롭게 마운트 될 것입니다.

 

2) DOM 엘리먼트의 타입이 같은 경우

같은 타입의 두 React DOM 엘리먼트를 비교할 때 React는 두 엘리먼트의 속성을 확인하여, 동일한 속성은 유지하고

변경된 속성만 갱신하게 됩니다.

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

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

위와 같은 변경의 경우 React는 현재의 DOM에서 className 속성만 변경하게 됩니다.

 

3) 자식에 대한 재귀적 처리

DOM 노드의 자식들을 재귀적으로 처리할 경우 React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경을 생성합니다.

<ul>
  <li>First</li>
  <li>Second</li>
</ul>

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

위의 예시의 경우 두 트리에서 First와 Second가 일치하는 것을 확인한 다음 새로 추가된 Third를 Tree에 추가하게 됩니다.