DOM이란?
Document Object Model
사용자와 상호작용하는 목적으로, 동적으로 콘텐츠를 표현한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DOM</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img src="Ditto.png" id="ditto" class="gray" alt="ditto" />
</body>
<script src="app.js"></script>
</html>.gray {
filter: grayscale(100%);
}const ditto = document.getElementById("ditto");
ditto.onclick = (event) => {
ditto.classList.toggle("gray");
};
메타몽을 클릭할 때마다 onClick이라는 이벤트 리스너의 영향으로 class의 gray가 사라졌다 추가되었다 반복된다.
이런 식으로 사용자와 상호작용하는 역할을 하는 것이 바로 DOM이다.
프론트엔드라면 다양한 이벤트와 인터렉션을 다뤄야 하기 때문에 반드시 DOM에 대한 이해가 필요하다고 생각된다.
콘텐츠를 표현하는 플로우
HTML에서 콘텐츠를 표현하는 흐름은 [파싱 > DOM 생성 > 렌더 트리 생성 > 레이아웃 > 페인팅] 이라고 할 수 있다.
브라우저는 HTML, CSS를 이해하기 위해 DOM, CSSOM 형태로 정보를 구축한다.
1. 파싱 (Parsing)
웹 브라우저가 HTML 파일을 읽고 *파싱한다. (*HTML 문서를 이해 가능한 구조로 변환하는 과정)
웹 브라우저는 HTML 문서를 위에서 아래로 읽으며, 각 HTML 태그를 식별하고 태그의 구조와 관련된 정보를 추출한다.
2. DOM 생성 (DOM creation)
파싱된 HTML 문서를 기반으로, 브라우저는 DOM을 생성한다.
DOM은 HTML 문서의 계층적인 트리 구조로, 각 HTML 요소와 해당 요소의 속성, 텍스트 콘텐츠 등을 표현한다.
한 마디로 DOM은 웹 페이지의 구조와 내용을 추상화 하여 표현한 것이라고 할 수 있다.
2-1. CSSOM (Cascading Style Sheets Object Model)
CSS 문서의 구조와 스타일 정보를 표현한 객체 기반의 모델로 DOM과 유사한 방식으로 CSS 문서를 표현한다.
CSSOM도 DOM처럼 파싱하고 레이아웃하는 흐름으로 구성되며 4단계로 진행된다.
(파싱 - 구문 트리 생성 > 스타일 규칙 계산 > 스타일 결정 > 레이아웃 및 페인팅)
3. 렌더 트리 생성 (Render Tree Construction)
DOM 트리를 기반으로 브라우저는 *렌더 트리를 생성한다. (*화면에 실제로 표시되는 요소들로 구성된 트리 구조)
DOM과 CSSOM을 합한 후 최종적으로 브라우저에 표기될 것들만 선별되어 생성된다.
예를 들어 <head>, span의 display:none 같은 건 화면에 출력되지 않아 렌더 트리에 포함되지 않는다.
4. 레이아웃 (Layout)
렌더 트리의 각 노드들의 위치와 크기를 계산한다. 각 요소가 화면의 어디에 위치하고 얼만큼의 공간을 차지하는지 결정한다.
이 때 사용자의 뷰포트를 바탕으로 %나 vw, vh처럼 상대적인 위치를 px 같은 절대적인 위치로 변환하여 표시한다.
5. 페인팅 (Painting)
레이아웃 단계에서 계산한 정보를 기반으로 브라우저가 실제 화면에 요소들을 그린다.
페인팅은 각 요소의 시각적인 모습을 결정하고, 화면에 픽셀을 그린다.
페인팅까지 끝난 후, 어딘가 변경된다면 브라우저는 변경된 모든 부분을 다시 구성한다.
그래서 리액트가 각광받는다는 생각이 들었던 게, 리액트는 이렇게 모든 부분을 다시 구성하지 않고 렌더링을 최적화 한다.
리액트는 가상DOM을 사용해 변경된 부분을 확인하고 그 부분을 한 번에 렌더링해 지금과 같이 모든 과정을 렌더링하지 않아도 된다.
(바닐라JS와 리액트로 각각 페이지를 만들고 변경해보면, 리액트는 수정한 부분만 변경되는 것을 볼 수 있다.)
'🌎 DOM' 카테고리의 다른 글
| [DOM] 태그와 엘리먼트에 대해 알아보자 (0) | 2023.06.07 |
|---|
