-
DOM과 Virtual DOMComputer Science/Web 2022. 3. 2. 17:53
DOM(Document Object Model)
DOM의 개념
문서 객체 모델(The Document Object Model, 이하 DOM)은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
출처 https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
MDN 웹 문서에 따른 DOM의 정의다. 다시 한번 정리해보자. DOM은 HTML, XML 문서의 프로그래밍 인터페이스다. 즉, 문서를 객체로 표현한 모델, 조금 더 줄여보면 '문서 객체'를 의미한다.
HTML과 DOM의 차이
기존 우리가 작성하고 수정한 HTML 파일은 단순 텍스트로 구성되어 있다. 이를 실행하면 그냥 HTML 태그들이 텍스트로 출력될 뿐이다. 하지만 DOM은 이 HTML 문서가 객체 모델로 변환되었기 때문에 다른 프로그램에서 사용할 수 있다는 특징을 가지고 있다. 예시를 이해해보자.
<!DOCTYPE html> <html lang="en"> <head> <title>Avengers</title> </head> <body> <div> <p>cpt america</p> <p>ironman</p> </div> </body> </html>위와 같은 HTML 태그가 있다고 하자. 이 태그들은 지금은 그저 텍스트에 불과하다. 이를 빌드해 DOM으로 변환해보자.
자, 이제 차이를 알겠는가? 단순 텍스트 파일이던 HTML 문서는 위 그림과 같이 특정 구조를 가진 DOM이 되었다. DOM은 HTML 사이의 관계를 보여주는 자료 구조다. 이 자료구조는 Tree 형태를 가지고 있기 때문에 DOM을 보고 DOM 트리라고도 한다. 다시 말해, DOM은 텍스트 파일인 HTML 문서를 웹 브라우저와 JS가 이해할 수 있는 자료구조로 변환한 것이다.
그렇다면 HTML와 DOM은 항상 똑같을까? HTML을 DOM으로 변환했다면 텍스트로 쓰여져 있는 HTML의 구조와 DOM의 내부 구조와 같아야 하지 않을까? 하지만 인생은 그렇게 원하는대로 흘러가지 않는 법. HTML 문서와 DOM의 구조가 항상 같지는 않다. 이유는 여러가지가 있는데 크게 두가지를 이야기 하곤 한다.
- HTML 작성이 잘못 되었을 때
HTML 문서가 유효하지 않은 경우다. HTML 문서에서 태그의 짝이 없거나 아예 태그 자체가 없는 경우, DOM이 만들어질 때, 브라우저에서 임의로 이를 수정한다. 예를 들어 살펴보자
위와 같은 경우 문서가 조금 허전하지 않는가? <html> 태그 안에 들어갈 <head> 태그와 <body> 태그가 쏙 빠져있다. 하지만 이런 경우에도 브라우저에서 html 파일을 열어보면 브라우저에 잘 표기되는 것을 확인할 수 있다. 이 경우가 바로 브라우저가 인위적으로 DOM을 수정한 경우다.<html> 주유소 가맥 </html> - JS로 DOM을 수정할 때
view단 작업을 하면서 이런 코드를 작성한 경우가 많이 있을 것이다.
이 경우가 바로 js로 인해 DOM을 수정한 경우고, 이때 HTML문서와 DOM 사이 차이가 발생하게 된다.let test = document.getElementById(id); test.append("안골 진미집")
Virtual DOM(Virtual Document Object Model)
Virtual DOM 등장 배경
위의 DOM에서 파생된 개념이 바로 Virtual DOM이다. 왜 멀쩡한 DOM을 놔두고 Vritual DOM이라는 개념이 등장했을까? 그 이유를 알기 위해선 브라우저의 동작 원리를 파악할 필요가 있다.
브라우저 동작 원리는 다음 다섯가지 단계를 거친다.
- HTML 문서를 토대로 DOM 파일 빌드
- CSS 파일을 토대로 CSSOM 파일 빌드
- DOM과 CSSOM을 합쳐 렌더 트리 생성
- 렌더 트리의 각 노드들의 위치 좌표 인지 (Layout 단계)
- 스크린에 결과 그려내기 (Painting 단계)
다음 상황을 가정해보자. 현재 위의 다섯 단계를 모두 거쳐 스크린에 결과까지 그려냈다고 하자. 그런데 갑자기 HTML 파일에 변화가 생긴다면? 그때는 어떻게 할 것인가? 별 다른 방법이 있나! 위와 같은 방법을 토대로 다시 모든 과정을 거쳐 화면에 결과물을 그려내야 한다! 이 과정에서 렌더트리도 다시 생성되고 이때 모든 요소들의 스타일 또한 다시 계산된다. 이런 문제는 SPA에서 많이 발생하는데 SPA에서 특히 DOM 조작이 많이 일어나기 때문이다.
이렇게 어떤 변화가 생겼을 때마다 위와 같은 과정을 반복하는 것은 비효율적이고, 이를 해결하기 위해 나온 개념이 바로 가상 DOM(Virtual DOM)이다.
Virtual DOM의 개념
가상 DOM은 React, Vue.js 및 Elm과 같은 선언적 웹 프레임 워크에서 사용되는 DOM의 경량 JavaScript 표현입니다. 가상 DOM을 업데이트 하는 것은 실제 DOM을 업데이트 하는 것보다 바교적 빠릅니다.
위는 위키피디아에서 찾은 가상 DOM 정의다. 사실 이렇게만 읽으면 무슨 말인지 쉽게 이해할 수 없다. 그렇다고 공부를 포기할수는 없으니... 우선은 가상 DOM을 'DOM을 추상화해 메모리에 저장한 것'이라고 생각해보자. 이렇게 이해한 뒤 밑의 내용을 따라가보자.
Virtual DOM의 역할
가상 DOM은 이름에서도 알 수 있듯이 실제 DOM이 아니다. 말 그대로 가상이다. 이 이야기는 무엇이냐. 화면에 렌더링할 필요가 없다는 이야기가 된다. 화면에는 실제 DOM이 렌더링 되어야 되기 때문에 가상 DOM은 그 사이에 낄 틈이 없다.
가상 DOM은 화면에 수정사항이 생기면 DOM에 바로 반영하지 않는다. 대신 가상 DOM을 만들어낸다. 그 뒤, 변경사항은 이 가상 DOM에 적용시킨다. 그리고 모든 변경이 완료된다면 이 가상 DOM의 변경 사항을 실제 DOM에 적용한다. 이제 실제 DOM에 변경사항이 생겼다. 그렇다면 어떻게 되겠는가? 변경사항에 맞춰 렌더 트리가 생기고, 레이아웃 과정을 거쳐 페인팅되지 않겠는가?
만일 가상 DOM이 없었다면 실제 DOM에서 변경사항이 하나 생길 때마다 렌더 트리를 한번씩 생성하고 있었을 것이다. 하지만 가상 DOM에서 변경사항을 모두 처리한 뒤 최종 변경사항을 DOM에 보낸다면 DOM은 렌더 트리를 단 한번만 생성하면 된다.
즉, 가상 DOM은 DOM에 변경사항을 바로 적용할 때 생기는 불필요한 렌더 트리 생성을 줄이기 위하여 만들어진 개념이고 위와 같은 방식으로 실제 브라우저의 불필요한 렌더링을 줄인다.
DOM 조작과 Virtual DOM 조작의 결정적 차이
앞서 이야기한 것은 "가상 DOM을 사용하면 DOM을 직접 조작했을 시 생기는 불필요한 렌더링을 줄일 수 있다"라고 줄일 수 있다. 다만 여기서 한가지 강조하고 싶은 것은 바로 '불필요한 렌더링'이다. 'DOM만 놓고 봤을 때, DOM이 느리냐?'라고 물어보면 그건 아니다. DOM 자체는 느리지 않지만 그 뒤, '불필요한 렌더링' 부분에서 큰 문제가 발생한다.
DOM을 직접 조작하면 한번의 조작에 한번의 렌더트리 생성, 레이아웃과정을 거친다. 이 부분에서 크게 연산 횟수를 줄일 수 있다. 위에서 살펴보았듯이 이 과정은 조작 과정을 합쳐 한번에 DOM에 적용시키는 방식으로 해결했다. 또한 가상 DOM은 이 조작 과정을 자동으로 인지해 무엇이 바뀌고 있는지, 아니면 상태를 그대로 유지하고 있는지 파악해주는 역할도 한다.
즉, 불필요한 렌더링 과정을 줄이는 역할과 기존 값의 변화 상태를 파악해주는 역할을 하는 것이 가상 DOM인 것이다.
최종 정리
DOM 정리
- DOM은 HTML, XML 문서의 프로그래밍 인터페이스
- DOM은 Tree 구조로 이루어져 있다.
- DOM Tree 내부의 각 node들은 스크립트 언어, 프로그래밍 언어들에서 사용될 수 있게 연결해주는 역할을 한다.
- HTML 문서 기반으로 DOM이 빌드되긴 하지만 그 둘의 구조가 항상 같지는 않다.
Virtual DOM 정리
- 가상 DOM(Virtual DOM)은 실제 DOM을 추상화해 메모리에 저장한 것
- 변동 사항이 생겼을 때, 바로 실제 DOM을 조작하지 않고 가상 DOM에 먼저 적용함
- 모든 조작이 끝나면 모든 변동사항을 한번에 실제 DOM에 적용해 불필요한 렌더링을 줄임
- 변동사항을 감시하는 기능 또한 가지고 있음
참고
https://velog.io/@sangminnn/Why-Virtual-DOM
Why Virtual DOM?
Why Virtual DOM?
velog.io
[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? | VELOPERT.LOG
리액트를 지난 2년간 사용하면서도 막상 말끔하게 설명하라고 하면 어려웠던 주제, 원래 번역글은 잘 안쓰지만 글 자체가 구성이 잘 되어있어서 글을 번역해보았습니다. 원본: https://hashnode.com/p
velopert.com
https://ryublock.tistory.com/41
DOM과 Virtual DOM
1. DOM 이란 Q. 우리가 흔히 알고 있는 HTML 파일이 브라우저에 표현 되려면 어떤 과정이 있어야할까? A. 텍스트 파일로 만들어진 웹 문서를 브라우저에 렌더링 하려면 브라우저가 이해할 수 있는 구
ryublock.tistory.com
- HTML 작성이 잘못 되었을 때