지난 면접에서 "DOM은 왜 트리구조로 만들었을까요? 스택, 큐 등 다른 자료구조도 있었을텐데요?" 라는 질문을 받았다. 나름 DOM과 Virtual DOM에 대해 공부했다고 생각했는데 이 질문을 받았을 때, 머리 속에 떠오른 생각은 오직 2가지였다.
1. 그러네? 왜 하필 트리구조지?
2. 왜 이제껏 의문을 품지 않았지??
그래서 면접을 복기하면서 위 질문에 대해서 공부해보기로 했다. 생각해보지 않았던 내용이라 오랜만에 군침이 돌았다 😋 그럼 렛츠 고 ~!
이와 관련하여 잘 정리된 글이 있어서 해당 글을 참고해 작성했습니다!
👉 DOM 트리를 트리구조로 바라보기
01. HTML과 DOM, 대체 무슨 관계인데?
DOM에 대해 설명할 때, 항상 따라다니는 것이 바로 HTML이다. 그래서 대체 HTML이 뭘까?
위 내용은 MDN의 DOM에 대한 소개 중 일부를 발췌한 것이다. 여김없이 HTML과 함께 설명되고 있다. 도대체 둘 사이에 무슨 사연이 있는지 살펴보자.
HTML은 인터넷 브라우저를 만들기 위해 만들어진 파일 포맷으로, 브라우저는 HTML 문서의 태그를 인식해 사용자가 브라우저 화면을 통해 볼 수 있도록 적절히 그려내는 기능을 한다.
이때 브라우저는 HTML 문서를 읽을 때 각 태그 요소들을 추출해 트리형태로 재조립한다. 이렇게 만들어진 나무를 DOM 트리라고 부르는 것이며, 여기서 트리(tree) 는 자료구조의 일종이다.
💡 자료구조 :데이터를 저장할 형태를 유형화해둔 것
02. DOM은 HTML의 계층구조를 표현한 자료구조이다.
결론부터 말하자면, 트리 구조가 계층 관계가 있는 데이터들을 표현하기에 가장 적합한 자료구조 이기 때문이다.
HTML 문서
아래와 같이 HTML 태그들은 상위 태그가 하위 태그를 감싸는 형태로 이루어져 있고, 이 관계를 계층 관계로 볼 수 있다.
따라서 하위 태그에서 시작해 이를 감싸고 있는 상위 태그로 계속 올라가다보면 가장 상위에 위치한 태그인 <html> 태그를 만날 수 있다.
그리고 <html> 태그에서 추출된 노드가 바로 DOM 트리의 루트 노드(Root Node)가 된다.
<html>
<head>
<script>
// run this function when the document is loaded
window.onload = function () {
// create a couple of elements in an otherwise empty HTML page
var heading = document.createElement("h1");
var heading_text = document.createTextNode("Big Head!");
heading.appendChild(heading_text);
document.body.appendChild(heading);
};
</script>
</head>
<body></body>
</html>
다시 강조하자면, 트리는 계층적으로 연결된 데이터들을 표현하기에 적합한 자료구조 이다.
제목과 내용으로 리우어진 텍스트 문서를 웹 페이지에 표시하기위해 고안된 HTML 언어는 문단과 문장의 종속관계를 태그로 표현함으로써 계층적인 속성을 갖게 되었다. 그렇기에 트리구조로 이를 표현하는 것이 매우 적합했기에 DOM은 트리구조를 따르게 되었다.
03. DOM 트리의 탐색
DOM 트리의 순회는 트리 자료 구조의 순회 방법을 따른다. 트리의 노드들은 정해진 순서가 없기 때문에 탐색하는 방향이 정해져 있지 않다. 다만 자료구조의 목적은 자료를 효율적으로 탐색하고, 삽입이나 삭제할 수 있는 구조로 저장하는 것이고, 트리구조 역시 자료구조이기 때문에 효율적인 탐색 방법이 존재한다.
트리를 효율적으로 탐색하기 위해서는 타깃 노드에 도달할 때까지 최소한의 노드들을 거쳐가야한다. 가령 불필요하게 여러 번 방문하는 노드가 없어야 한다.
이를 위해 탐색하는 과정에는 현재 방문한 노드를 기록하는 과정이 포함된다.
트리 자료구조의 노드를 탐색해 원하는 타깃을 찾아내는 방법에는 크게 깊이 우선 방식(DFS)과 너비 우선 방식(BFS)가 있다.
↕️ 깊이 우선 방식(DFS)
깊이 우선 탐색 방식은 루트 노드로부터 시작해 자식 노드로 내려가며 탐색하는 방식이다. 만약 마지막 자식 노드까지 도달했음에도 타깃 노드를 찾지 못했다면, 다시 부모 노드로 거슬러 올라가 부모의 다른 자식 노드들을 탐색한다.
위 과정을 타깃 노드를 찾을 때까지 반복한다.
↔️ 넓이 우선 방식(BFS)
넓이 우선 탐색 방식은 루트부터 시작해 같은 레벨의 노드들을 왼쪽에서 오른쪽 방향으로 탐색하고, 이후 아래 레벨의 노드의 탐색을 반복하는 방식이다.
이때, 트리에서 레벨이란, 루트부터 특정 노드까지 도달하는 데 지나가는 간선의 개수를 의미한다.
04. DOM과 가상 DOM
브라우저는 DOM 트리뿐 아니라, CSS 요소들을 가진 CSSOM 트리, 화면에 표시할 요소들을 가진 Render 트리생성한다. 즉 브라우저의 모든 요소들은 서로 계층적인 관계로 표현되고, 하위 요소는 상위 요소에 종속된다.
현재는 DOM에 변경된 내용만 새로 업데이트하기 위해 가상 DOM(Virtual DOM) 개념이 되입되었다.
한편, 웹페이지의 규모가 점차 커지면서 페이지 리로딩에 걸리는 시간이 늘어가게 되었다. 브라우저는 단 한 개의 DOM 요소가 변경되어도 바뀐 DOM 구조의 요소의 배치와 스타일 요소를 계산하는 과정을 거치기 때문에, 웹 페이지의 규모가 커질수록 연산비용이 증가하면서 페이지 리로딩 시간이 증가하데 된 것이다.
리액트와 vue.js에서 도입된 가상 DOM이 바로 이 연산과정을 줄이기 위해 고안되었다.
가상 DOM은 DOM의 사본을 저장하는 자바스크립트 객체로, 특정 요소에 업데이트가 발생하면 기존 DOM과 새로 만들어진 가상 DOM을 비교해 변경된 요소들만 DOM에 한번에 업데이트한다.
즉 DOM 트리는 트리 구조의 장점을 바탕으로 빠르고 좋은 성능을 보이는 자료구조로, HTML 문서의 파싱 결과로 DOM(Document Object Modal)을 구성할 때 트리 자료 구조를 선택하게 된 것이다.
