[리액트] 가상 돔(Virtual DOM)이란?

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것

 

◼ DOM이란?

Document Object Model의 약어로, 객체로 문서 구조를 표현하는 방법. XML이나 HTML로 작성한다.

웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용함. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다.

 

 

◼ DOM의 단점

 동적 UI에 최적화되어 있지 않음! 

 DOM 자체는 빠르지만, 웹 브라우저 단에서 DOM에 변화가 일어나면 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 리페인트 하는 시간이 허비됨

돔트리가 수정될때 마다 렌더트리가 실시간으로 갱신됨

 

SPA(Single Page Application)가 대세인 웹앱 같은 경우, 단일 페이지에서 사용자와의 인터랙션이 빈번히 발생 ->  사용자 입장에서는 한번의 클릭이지만 실제 그 클릭 이벤트로 일어나게 되는 수많은 레이아웃들의 위치, 모양, 색상, 데이터 호출 등이 일어나기 때문에 기존의 방식대로 개발을 진행하게 되면 브라우저가 연산하게 되는 양은 어마어마하게 늘어날 수 밖에 없다. 그리고 자연스럽게 이는 사용자에게 부적절한 경험을 제공!

 

 

◼ Virtual DOM

실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. 실제 DOM의 가벼운 사본 느낌!

 

◼ 이런 단점을 극복하기 위해,

DOM을 최소한으로 조작하여 작업을 처리하는 방식

Virtual DOM으로 DOM을 추상화함으로써 DOM 처리 횟수를 최소화하고, 불필요한 렌더링 횟수를 줄이고 효율적으로 진행

가상돔을 이용해 한 번만 돔수정을 하고, 한번만 렌더 트리를 만들어내어 결과적으로 브라우저는 한번만 렌더링을 한다.

 

 

리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할때는 다음 세 가지 절차를 거친다.

 

 1) 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.

 2) 이전 Virtual DOM에 있던 내용과, 현재 내용을 비교한다

 3) 바뀐 부분만 실제 DOM에 적용한다.