버추어 돔(Virtual Dom) 알아보기

 

요즘 핫한 React와 Vue 모두 'Vertual Dom' 이라는 것을 사용합니다. 

 

그럼 도대체 버추어 돔이 무엇이길래 요즘 가장 핫하고(스벨트 미안: 그리고 참고로 스벨트는 버추어 돔을 사용하지 않습니다)  사용빈도가 높은 두 프레임워크에서는 버추어 돔을 사용할까요?

 

우선 버추어 돔(Vertual Dom)을 이해하기 전에 선행 지식으로 알아두면 좋은 것은 브라우저의 동작원리입니다. 브라우저의 동작원리를 모른다고 해서 버추어 돔을 이해하지 못하는 것은 아니지만 확실히 브라우저의 동작원리를 이해하고 있으면 왜 버추어 돔을 사용하는지와 버추어 돔이 무엇인지 좀 더 명확하게 이해하실 수 있습니다.

 

브라우저의 동작원리를 심도있게 알고 싶으시다면 이전에 작성한 브라우저는 어떻게 동작하는가? 를 먼저 읽어 보시고 오면 좋습니다. 가볍게 브라우저의 동작원리를 이해하고 싶다면 브라우저의 역할과 스크립트 로드 시점에 대한 글을 읽어 보셔도 좋습니다.

 

두 글을 따로 읽기 싫으신 분들은 아래에 간략하게 제가 브라우저의 동작원리를 정리했으니 해당 글을 보셔도 좋습니다. 

 

💡 돔(DOM)이란?

DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 문서 객체 모델을 의미합니다. 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미합니다.

 

HTML의 DOM 트리

 

DOM은 HTML과 스크립팅 언어(Javascript)를 서로 이어주는 역할을 합니다. 

 

 

👍 간략히 살펴보는 브라우저 동작원리

브라우저는 처음 화면을 생성하기 위해  HTML을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱 하고 DOM 노드(Node)로 이뤄진 트리를 만들어요. '무엇을' 화면에 그릴지 결정하죠. (HTML 파서)

그 후 CSSOM을 생성하는데 CSS 파일과 각 엘리먼트의 inline 스타일을 파싱 하면서 '어떻게' 그릴지 결정합니다. (CSS 파서)

이 두가지 파싱을 합쳐서 Render Tree 라고 말합니다. 

 

렌더 트리가 모두 만들어지고 나면, 레이아웃 과정을 거치게 됩니다.  Layout (reflow라고도 불립니다) 은 파싱된 노드들에게 스크린의 좌표가 주어지고, 정확히 어디에 나타나야 할지 위치가 주어지게 됩니다.

 

그 다음 작업은 렌더링 된 요소들에 색을 입히는 과정입니다.  Painting 이라고 말합니다.  트리의 각 노드들을 거쳐가면서 paint() 메소드를 호출하고 우리가 원하는 정보가 스크린에 나타나는 됩니다.

 

👍 그렇다면 왜 가상 돔 (Virtual DOM )이 나오게 된 것일까?

DOM은 DOM에 변화가 생기면(스크립트를 통한 레이아웃 변화 또는 화면의 Resize등) 렌더트리를 재생성하고 (그러면 모든 요소들의 스타일이 다시 계산됩니다) 레이아웃을 만들고 페인팅을 하는 과정이 다시 반복되는거죠.

 

복잡한 SPA(싱글 페이지 어플리케이션) 에서는 DOM 조작이 많이 발생합니다. 그 뜻은 그 변화를 적용하기 위해 브라우저가 많이 연산을 해야한단 소리고, 전체적인 프로세스를 비효율적으로 만듭니다.

더욱이 DOM 조작의 실제 문제는 각 조작이 레이아웃 변화, 트리 변화와 렌더링을 일으킨다는겁니다. 예를 들어 30개의 노드를 하나 하나 수정하면, 그 뜻은 30번의 (잠재적인) 레이아웃 재계산과 30번의 (잠재적인) 리렌더링을 초래한다는 것이죠.

 

Virtual DOM 은 30번의 변화가 있다고 해서 30번 수정이 발생하지 않고 모든 연산이 끝나고나면 그 최종적인 변화를 실제 DOM에 반영합니다. 모든 변화를 하나로 묶어서 단 한번만 적용하기 때문에  레이아웃 계산과 리렌더링의 규모는 커지겠지만, 연산의 횟수를 줄여서 성능을 개선합니다.

 

물론 이 과정은 Virtual DOM 이 없이도 이뤄질수 있습니다. 그냥, 변화가 있을 때, 그 변화를 묶어서 DOM fragment 에 적용한 다음에 기존 DOM 에 던져주면 되는데 그러면, Virtual DOM 이 해결 하려고 하는건 무엇이냐?

 DOM fragment를 관리하는 과정을 수동으로 하나하나 작업 할 필요 없이, 자동화하고 추상화하는게  버추어 돔의 역할입니다. 그 뿐만 아니라, 만약에 이 작업을 여러분들이 직접 한다면, 기존 값 중 어떤게 바뀌었고 어떤게 바뀌지 않았는지 계속 파악하고 있어야하는데 (그렇지 않으면 수정 할 필요가 없는 DOM 트리도 업데이트를 하게 될 수도 있으니까요), 이것도 Virtual DOM 이 이걸 자동으로 해주는거에요. 어떤게 바뀌었는지 , 어떤게 바뀌지 않았는지 자동화가 이루어 지게 됩니다.

 

마지막으로, DOM 관리를 Virtual DOM 이 하도록 함으로써, 컴포넌트가 DOM 조작 요청을 할 때 다른 컴포넌트들과 상호작용을 하지 않아도 되고, 특정 DOM 을 조작할 것 이라던지, 이미 조작했다던지에 대한 정보를 공유 할 필요가 없습니다. 즉, 각 변화들의 동기화 작업을 거치지 않으면서도 모든 작업을 하나로 묶어줄 수 있다는거죠.

 

위와 같은 상황에서 Virtual DOM 이 빛을 발합니다! 만약에 View에 변화가 있다면, 그 변화는 실제 DOM 에 적용되기전에 가상의 DOM 에 먼저 적용시키고 그 최종적인 결과를 실제 DOM 으로 전달해줍니다. 이로써, 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선되는 것 이지요. 

 

다시 정리하면 가상 돔은 실제 DOM의 가벼운 사본이라고 말할 수 있습니다. 

DOM의 상태를 메모리에 저장하고, 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영 하기 때문에 브라우저의 기본 동작처럼 계쏙해서 Reflow와 Repainting 이 발생하지 않아도 되며 이는 성능의 향상으로 이어지게 됩니다. 

 

✔ 가상돔이 Dom에 수정된 부분을 반영하는 절차예시

 특정 페이지에서 데이터가 변했다고 가정 했을 경우

 

1. 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링합니다.

2. 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교합니다. (가상 돔 끼리 비교)

3. 바뀐 부분만 실제 DOM에 적용이 됩니다.

 

 

출처

• https://velopert.com/3236
• https://dev-cini.tistory.com/10
• https://dev-cini.tistory.com/11