개발 블로그

브라우저의 Workflow를 통한 DOM과 가상DOM에 대한 이해 본문

IT/React

브라우저의 Workflow를 통한 DOM과 가상DOM에 대한 이해

파티에 2021. 8. 18. 15:48

React를 공부하다보면 DOM에 대한 이야기가 계속해서 등장한다. 많은 React 사용자가 가상 DOM에 대해 알고 있다고 하지만, 자세히 설명해달라고 하면 명확하게 설명해주는 사람이 없었기에 브라우저를 기준으로 DOM과 가상DOM에 대해 정리해보려고한다. 

브라우저의 Workflow

DOM과 가상DOM에 대해 명확히 이해하려면 브라우저의 작동순서부터 알아볼 필요가 있다.

그림1. 브라우저의 Workflow

DOM Tree 생성

브라우저가 HTML 을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱하고 DOM node로 이뤄진 트리를 만든다. 각 노드는 HTML엘리먼트들과 연관되어 있으며, 아래와 같이 만들어진다.

그림2. DOM Tree 예시

Render Tree 생성

외부 CSS 파일과 각 HTML엘리먼트의 inline 스타일을 파싱해 만들어진 스타일 규칙을 사용하여 DOM 트리에 따라 새로운 트리인 렌더트리를 만든다. 여기에서 노드에 스타일을 입히는 과정을 attachment라 부른다. DOM 트리의 모든 노드들은 'attach' 라는 메소드가 있으며, 이 메소드가 스타일 정보를 계산해서 객체형태로 반환한다. 이 과정은 동기적(synchronous) 작업이라고 부른다.
만약 DOM 트리에 새로운 노드가 추가되면, 해당 노드의 attach 메소드가 실행된다. 렌더 트리를 만드는 과정에서 각 요소들의 스타일이 계산되며, 이 계산 과정에서 다른 요소들의 스타일 속성들을 참조하기도 한다.

*주의. 렌더 트리는 화면에 반영되는 것만 가지고 있기에 HTML의 모든 정보를 표현하는 돔 트리와 일대일 관계는 성립되지 않는다. 즉 렌더 트리에 없고 돔 트리에만 있는 구성 요소가 있을 수 있다.

Layout

렌더 트리가 다 만들어지고 난 뒤, 각 노드들에게 스크린의 좌표가 나눠줌으로서 해당 노드가 어디에 표시되어야 할 지에 대한 위치가 주어진다.

Painting

렌더링 될 요소들에게 색을 입히는 과정으로, 트리의 각 노드들을 거쳐가면서 paint() 메소드를 호출된다. 이 작업이 끝나면 스크린에 원하는 화면이 표시된다.

DOM(Document Object Model)이란?

정의

  DOM은 흔히 "HTML 문서에 대한 인터페이스"라는 의미로 사용된다. 앞선 그림2의 DOM Tree를 보면 HTML문서의 태그를 Tree형태로 나타냄으로서 사용자(javascript 등)가 해당 문서를 쉽게 접근할 수 있도록 도와준다. 그러므로 DOM의 뜻 안에 있는 문서 객체(Document Object)는 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 객체라는 의미로 생각하면 된다.
  정리하자면, DOM이란 "웹 페이지를 구성하는 HTML태그들을 Script가 접근할 수 있도록 브라우저가 트리구조로 만든 객체 모델" 이라고 할 수 있다.

문제점

  DOM은 DOM에 변화생기면, 렌더트리를 재생성하고 모든 요소들의 스타일이 다시 계산한 뒤, 레이아웃을 만들고 페인팅을 하는 과정이 다시 반복한다. 여기서 만약 30개의 노드를 하나 하나 수정하게 된다면, 30번의 (잠재적인) 레이아웃 재계산과 30번의 (잠재적인) 리렌더링을 초래하게 된다. 이와 같은 과정은 현재 페이지를 동적으로 계속 재작성하는 SPA(싱글 페이지 어플리케이션)에서는 매우 불리하게 작용하게 되는데, 이에 대한 해결책으로 등장한 것이 Virtual DOM이다.

Virtual DOM(Virtual Document Object Model)이란?

정의

  Virtual DOM은 DOM의 변화를 처리하는 과정에서 생기는 비효율적인 연산을 최소화하기 위해 만들어졌다. Virtual DOM은 만약에 UI에 여러 변화가 생긴다면, 그 변화들을 실제 DOM 에 적용되기전에 가상의 DOM에 먼저 모두 적용시키고 최종적인 결과만을 실제 DOM으로 전달해준다. 그러면, 브라우저는 실제 DOM과 전달받은 DOM을 한번만 비교하면 된다. 이러한 방식으로 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선시킬 수 있다.
  정리하자면, Virtual DOM이란 현재 UI의 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 

FrontEnd의 측면에서 본 Virtual DOM의 개념

 최근 등장하고 있는 프런트 앤드 프레임워크(vue, react, angular 등)들은 가상 돔을 통해 화면의 변화를 반영하고, 실제 DOM에 변경사항을 한 번에 반영함으로서 연산 횟수를 줄이고자 노력한다. 이 과정을 수행하기 위해서 아래와 같은 순서로 DOM을 업데이트시킨다.

  1. 데이터가 업데이트 되면 현재 UI를 가상돔에 리렌더링한다.
  2. 변화 되기 이전의 가상돔과 변경사항을 반영한 가상돔을 비교한다.
  3. 바뀐 부분만 실제 돔에 적용을 함으로서 레이아웃 계산은 한 번만 이행된다.

그림3. 프런트 앤드 프레임워크(vue, react, angular 등)에서 Virtual DOM이 작동하는 순서

 

요약

DOM은 HTML 요소(태그)들의 구조화된 표현이다.
즉, DOM은 HTML이 브라우저의 렌더링 엔진에 의해 분석된 뒤에 생기는 결과물.
HTML은 화면에 보이고자 하는 모양과 구조를 문서로 만들어서 단순 텍스트로 구성
DOM은 HTML문서의 내용과 구조가 객체모델(Tree의 형태)로 변환되어있으므로 다양한 프로그램에서 활용될 수 있다.

 

참고자료

'IT > React' 카테고리의 다른 글

React란?  (0) 2021.08.14
'IT/React' Related Articles more