✏️ Virtual DOM을 사용하는 이유?

 

 

React에서는 Virtual DOM이 있다. 이것이 바로 리액트의 장점이다.

Virtual을 직역하면 `가상`이라는 뜻이다. DOM은 `Document Object Model`의 약자이다.

그대로 해석하다보면 `가상의 문서 객체 모델`이다.

DOM은 HTML요소들을 계층 구조 형식으로 표현한 모델이다.

 

DOM은 웹 페이지 전체를 `document`라고 한다.

웹 페이지를 이루는 컴포넌트들은 `element`라고 한다.

DOM은 이러한 엘리먼트를 `tree`형태 (DOM tree)로 표현한 것이다.

트리의 요소 하나하나를 `노드` 라고 부른다. 각각의 노드는 해당 노드에 접근과 제어를 할 수 있는 `API`를 제공한다.

HTML요소에 접근해서 수정할 수 있는 함수라고 생각하면 될 것이다.

 

 

 

Virtual DOM(가상돔)이 왜 생겼을까?

React의 가상 DOM도 실제 DOM 내용에 기반해서 만들어진다. 하지만 왜 버츄얼 돔을 사용해야 할까?

 

만약에 DOM에 변화가 생긴다고 가정해보자, 웹페이지에 DOM에 변화가 생기면,

웹 브라우저는 그 변화를 반영하기 위해서 리랜더링 과정을 거친다.

이 과정은 javascript를 통해서 웹 페이지의 내용이나 구조, 스타일 등을 동적으로 변경할 때 일어나는데,

이를 통해 사용자에게 변화된 내용을 보여준다.

 

실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업이 무겁기 때문이다.

DOM의 조작은 비용이 큰 작업이므로 DOM의 변화와 리랜더링 과정은 성능에 영향을 미칠 수 있고 빈번한 레이아웃 변경은 웹 페이지의 성능을 저하시킬 수 있다.

 

 

 

그래서 DOM이 안좋은것? NO

React는 SPA와 다이나믹 UI의 웹 페이지를 만들기 위해서 존재한다.

규모가 적고 정적인 페이지라면 일반 DOM이 성능 이 더 좋다.

상황에 따라 어느 쪽이 좋은지 다를 수 있다는 것이다.

 

 

 

동적인 웹 페이지를 위해 등장한 것이 Virtual DOM인 것!

현재의 DOM은 트렌드에 맞지 않다.

초기 정적인 웹 페이지에 맞계 설계된 DOM은 정적인 성격을 가지고 있고,

현재 동적인 웹 애플리케이션에 사용하려면 성능상 문제가 발생한다.

복잡한 SPA에서는 DOM 조작이 굉장히 빈번하게 발생하고 있고,

그 변화를 적용하기 위해서는 브라우저가 많은 연산을 하게 되며, 전체적인 프로세스가 비효율적이게 된다.

 

 

 

 

Virtual DOM

Virtual DOM은 쉽게 말해서 구조가 동일한 복사본 형태이다.

객체 상태로 메모리에 저장되기 때문에 실제 돔을 조작하는 것 보다 빠를 수 밖에 없다.

실제 돔을 조작하는 것 보다 메모리상에 올라와있는 자바스크립트 객체를 변경하는 작업이 훨씬 더 가볍다.

즉, 실제 DOM을 추상화한 개념으로 메모리 내에 가상으로 존재하는 DOM을 의미한다. 

 

웹페이지의 DOM구조를 메모리에 로드하여, 실제 DOM에 변화를 주기 전에 버츄얼 돔에서 먼저 변화를 처리하는 방식을 사용한다.

이 방식은 실제 DOM에 직접 접근해서 변화를 주는 것보다 성능이 훨씬 효율적이다.

 

버츄얼 돔을 사용하면 웹 페이지에 상태 변화가 일어날 때 마다 실제 DOM을 조작하는 대신 메모리에 존재하는 가상의 DOM을 변경한다.

그리고 이 변경 사항을 적용하기 전에 이전 버츄얼 돔과 비교하여 실제로 변경이 필요한 부분만 찾아내서 실제 DOM에 적용한다.

이를 Diffing과 Reconciliation이라고 한다. 

 

 

Diffing - 공부필요
state가 변경되서 1번 2번과 가상돔을 비교해서 어느부분에서(element) 변화가 일어났는지를 비교한다.
파악이 끝나면 그 부분만 실제 DOM에 적용시켜준다.
변경사항을 모두모아 한번만 적용을 시켜줌
 
Reconciliation 재조정 - 공부필요
Batch Update
 

 

 

React와 Vew

리액트는 가상돔을 이용해서 실제돔을 변경하는 작업을 상당히 효율적으로 수행한다.

React.js와 Vew.js 는 (앵귤러X) 가상돔을 사용해서 원하는 화면을 브라우저에 그려준다.

자체적으로 상당히 효율적인 알고리즘을 사용해서 그려주기 때문에 그 속도가 어마어마하다.

 

 

 

 

 

 

 

빨간 색으로 수정사항이 생기면 Virtual DOM은 달라진 값을 탐지하여 변경하고 최종적인 결과물을 실제 DOM에 전달한다.

실제 DOM의 상태를 메모리에 저장하고, 변경 전과 변경 후의 상태를 비교 한 뒤 최소한의 내용만 반영하여 성능 향상을 이끌어낸다.

DOM의 상태를 메모리 위에 계속 올려두고 DOM에 변경이 있을 경우 해당 사항만 반영한다.

만약 Virtual DOM이 없으면, DOM은 변경된 빨간 부분뿐만 아니라 모든 곳을 빨간색으로 바꿔서 렌더링 한다.

사소한 변경사항에도 전체가 리렌더링되기 때문에, 성능 저하가 올 수 있다.

 

 

 

 

 

 

참고한 문서

The Virtual DOM