DOM과 가상DOM 쉽게 이해해 보기

리액트와 상태관리 툴(리덕스 등)을 사용하다 보면 불변성에 대해 항상 신경을 써야 한다. 그리고 왜 불변성을 신경 써야 하는지 이해하려면 가상 DOM에 대한 이해가 필요하다고 판단하였다. 헷갈리게 알고 있던 DOM과 가상 DOM을 정리해보고자 한다. 아직 브라우저 렌더링 과정에 대한 이해는 부족하기에 내용은 계속해서 수정될 수 있다.

---

DOM이란 Document Object Model로서 말 그대로 다큐먼트(웹페이지)를 객체로 표현하는 모델을 의미한다. 브라우저마다 DOM을 구현하는 방식은 다르기에 DOM이라는 것이 구체적으로 정해저 있는 언어나 모델과 같은 것은 아니다. 다만 웹페이지를 객체로 표현한 모델을 의미할 뿐이다.

그렇다면 브라우저는 어떻게 DOM을 이용하여 화면을 렌더링 할까?

첫째, 브라우저는 html태그를 파싱 하여 돔 트리를 구성한다.

동시에 브라우저는 스타일시트에서 css를 파싱 하여 스타일 규칙들을 만들어낸다.

둘째, 위에서 언급한 돔 트리와 스타일 규칙 두 가지가 합쳐져서 렌더 트리를 만들어낸다.

여기서 주의할 점은 렌더 트리는 화면에 반영되는 것만 가지고 있기에 HTML의 모든 정보를 표현하는 돔 트리와 일대일 관계는 성립되지 않는다. 즉 렌더 트리에 없어도 돔 트리에는 있을 수 있는 것이다.

이것이 DOM의 개념과 브라우저의 간단한 렌더링 과정이다.

---

그렇다면 가상 돔(Vitual DOM)은 무엇이고 왜 사용하는가?

기존에는 화면의 변경사항을 돔을 직접 조작하여 브라우저에 반영하였다. 하지만, 이 방법의 가장 큰 단점은 돔 트리가 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신된다는 점이었다. 즉, 화면에서 10개의 수정사항이 발생하면 수정할 때마다 새로운 랜더 트리가 10번 수정되면서 새롭게 만들어지게 되는 것이다.

가상 돔을 활용하면 이러한 불필요한 렌더링 횟수를 줄일 수 있다. 가상 돔을 활용한 대표적인 프런트 앤드 프레임워크가 리액트, 뷰, 앵귤러이다. 이러한 프레임워크들은 화면에 변화가 있을 때마다 실시간으로 돔 트리를 수정하지 않고 변경사항이 모두 반영된 가상 돔을 만들어낸다. 그 후 가상 돔을 이용해 한 번만 돔수정을 하게 되고 이는 한 번만 렌더 트리를 만들어내게 된다. 결과적으로 브라우저는 한번만 렌더링을 하게 됨으로써 불필요한 렌더링 횟수를 줄일 수 있게 되는 것이다.

위의 그림에서 볼 수 있듯이 vue는(리액트, 앵귤러 동일) 가상 돔을 통해 화면의 변화를 반영하고 실제 DOM에 변경사항을 한 번에 반영한다.