Dev-Tino 3주차(1):: DOM과 Virtual DOM

사이틀르 만들기 위해서는 html, CSS, JS(*javascript)따위를 이용하여 긴 문서를 작성해야 한다. 이미지가 하나도 없는 줄글을 입력하면 멋진 사이트가 실행된다. 이게 어떻게 가능한걸까?

이 ‘멋진 사이트’를 만들기 위해, 서버는 리소스를 파싱(*데이터 처리 과정에서 일어나는 변환 작업을 지칭하는 범용적인 용어, 다양한 문맥에서 사용될 수도 있고, 각각의 도메인에 맞는 데이터 해석 방식을 가리킬 수도 있다.)하여 브라우저가 이해할 수 있는 자료구조 형태-트리 형태로 바꾼다.

예를 들어, 이런 형태이다-

HTML은 파싱을 거쳐 DOM tree, CSS는 파싱을 거치면 CSSOM tree가 되며 JavaScript는 파싱을 거치면 AST(Abstract Syntax Tree)가 된다. 이 세 가지가 합쳐져 ‘렌더 트리’(렌더링을 위한 트리 자료구조, 이를 통해 렌더링이 실행됨.)를 형성한다.

DOM (The Document Object Model)

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web.

문서 객체 모델(DOM), 웹에서 문서의 구조와 내용을 구성하는 객체의 데이터 표현

즉, 렌더 트리=DOM=DOM tree는 ‘HTML 문서를 브라우저가 이해할 수 있도록 만든 Tree 자료구조’이다. 웹 브라우저가 수신한 html 문서를 파싱한 결과물이라고도 볼 수 있다. HTML 문서의 계층적 구조와 정보를 표현할 뿐만 아니라 DOM을 제어할 수 있는 API, 즉 프로퍼티와 메소드를 제공한다.

이 DOM은 다음과 같은 특징을 가진다::

1. DOM은 브라우저에 내장되어 있어 html의 내용을 javascript로 접근, 제어할 수 있다.

2. DOM에는 여러가지 node들이 있으며, 이러한 node들은 각각의 메소드(method)와 속성을 가진다.

JavaScript를 통해 DOM에 접근하고, 제어하며 탐색할 수 있는 것이다. DOM이 DOM을 탐색하고 조작할 수 있는 DOM API를 제공하기 때문이다. JavaScript가 DOM API를 통해 DOM이나 CSSOM을 변경하면 DOM과 CSSOM을 다시 결합하여 렌더 트리를 형성한다. 브라우저는 그 렌더 트리를 통해 다시 렌더링된다.

그런데 이 DOM이란 것엔 작은 단점이 존재한다. ‘새로운 요청이나 변경사항이 있을 때마다 전체를 다시 렌더링’한다는 점이다. 매 변경시마다 전체를 새로 렌더링하기 때문에, 레이아웃의 양이 많을 경우 렌더링 속도가 눈에 띄게 느려진다. 이를 개선하기 위해 프로그래머들은 가상 DOM (Virtual DOM)이라는 것을 만들어냈다.

가상 DOM (The Virtual Documnet Object Model) 이란?

실제 DOM을 추상화한 개념으로 메모리 내에 가상으로 존재하는 DOM을 의미한다. 웹페이지의 DOM 구조를 메모리에 로드하여 실제 DOM에 변화를 주기 전에 가상 DOM에서 먼저 변화를 처리하는 방식을 사용한다. 이 방식은 실제 DOM에 직접 접근하여 변화를 주는 것보다 성능적으로 훨씬 효율적이라는 점이다. 실제 DOM에 변화를 주는 것은 cost도 많이 들고 렌더링 역시 여러번 수행해야 하기 때문에 성능 저하가 일어난다.

그러나 Virtual DOM(가상 DOM)을 사용하면 웹 페이지의 상태 변화가 일어날 때마다 실제 DOM을 조작하는 대신 메모리에 존재하는 가상의 DOM을 변경한다. 그리고 이 변경 사항을 적용하기 전 이전 가상 DOM과 비교하여 실제로 변경이 필요한 부분만 찾아내 DOM에 적용한다. (부분적으로 렌더링)

즉 가상 DOM (Virtual DOM)이란 ‘부분적인 재 렌더링을 통해 DOM에 비해 경제성을 높인 형태’ 이다.

React(*사용자 인터페이스를 구축하기 위한 유연한 JavaScript 라이브러리, 컴포넌트라 불리는 작고 고립된 코드의 파편을 통해 복잡한 UI를 구성하도록 도움)를 통해 구현 가능하므로 이를 사용하기 위해서는 React에 대해서도 알아두어야 한다.

이 Virtual DOM의 경우에도 단점은 존재한다. 가상 DOM은 대부분의 경우 실제 DOM보다 빠르지만 조그만 변화에도 반응하기 때문에 최적화가 되어있지 않으면 오히려 실제 DOM보다 느릴 수 있다. (이런 현상을 오버헤드가 크다고 표현한다.) 이를 막기 위해서는 shouldComponentUpdate나 useCallback과 같은 함수를 사용하여 최적화하는 것이 좋다.

[참고 자료]

-https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

-https://m.blog.naver.com/magnking/220972680805

-https://www.w3schools.com/js/js_htmldom.asp

-https://velog.io/@sj_dev_js/HTML-DOM%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C

-https://velog.io/@greenbean/%ED%8C%8C%EC%8B%B1parsing%EC%9D%B4-%EB%AD%90%EC%95%BC

-https://velog.io/@optimist5235/DOM%EC%9D%B4-%EB%AD%90%EC%95%BC

-https://velog.io/@ctdlog/React-DOM%EC%9D%B4%EB%9E%80-Virtual-DOM%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

-https://www.google.com/search?q=DOM+%EB%8B%A8%EC%A0%90&oq=DOM+%EB%8B%A8%EC%A0%90&gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCDE1NDdqMGo0qAIAsAIB&sourceid=chrome&ie=UTF-8

-https://taedonn.tistory.com/5

-https://legacy.reactjs.org/docs/faq-internals.html

-https://refine.dev/blog/react-virtual-dom/#introduction