프론트 개발자라면 DOM이 무엇인지는 모두 아실텐데요.
이번 글에선 DOM에 대해 다시 한번 복습해봅시다.
DOM의 정의
우리가 작성한 HTML 코드는 단순히 텍스트에 불과합니다.
여기서 브라우저는 이 텍스트를 읽어서 화면에 그리기 위해, 각 HTML 요소를 객체로 변환합니다.
이 객체들이 서로 부모 - 자식 관계로 얽혀 나무 모양의 구조를 이루는데, 이를 DOM 트리라고 부릅니다.
왜 DOM이 필요할까?
DOM이 없다면 JS는 HTML의 내용을 바꿀 방법이 없습니다.
DOM 덕분에 JS는 다음과 같은 일을 할 수 있습니다.
- 내용 변경: 버튼을 클릭 시 텍스트를 바꿈
- 스타일 수정: 특정 요소의 색상을 빨간색으로 변경
- 요소 추가/삭제: 리스트 항목을 새로 만들거나 삭제
- 이벤트 처리: 사용자의 클릭이나 키보드 입력을 감지
DOM의 핵심 구조
DOM은 Node들로 구성됩니다. 주요 노드 타입은 다음과 같습니다.
| 노드 타입 | 설명 | 예시 |
| 문서 노드 | 트리의 최상위로, 전체 문서를 대표 | window.document |
| 요소 노드 | HTML 태그 그 자체 | <body>, <h1>, <div> |
| 어트리뷰트 노드 | 태그 속성 | class, id, src |
| 텍스트 노드 | 태그 안의 실제 글자 | "Hello World" |
JS로 DOM 조작하기
개발자는 JS를 사용하여 DOM을 탐색하고 수정합니다.
//ID가 'title'인 요소를 찾아서
const titel = documnet.getElementById('title');
//글자 색상을 파란색으로 바꿈
title.style.color = "blue";
//내용 수정
title,textContent = "hi";주의: DOM은 HTML이 아니다
여기서 헷갈리는 사람이 종종 존재하는데, DOM과 HTML은 1:1로 일치하지않습니다.
- 작성한 HTML: 오타가 있거나 태그가 닫히지 않았을 수 있습니다
- 생성된 DOM: 브라우저가 오타를 교정하고 구조를 바로잡아 생성한 최종 결과물입니다.
- 가상 DOM (virtual DOM): 리액트같은 프레임워크에서는 성능 최적화를 위해 실제 DOM의 복사본인 가상 DOM을 사용하기도 합니다
가상 DOM
가상 DOM 등장 이유
실제 DOM은 요소 변경 시마다 브라우저가 화면을 다시 계산하고 그리는 과정을 거칩니다.
즉, 100개의 리스트 아이템 중 단 하나만 수정되어도 전체 리스트를 다시 계산하는 비효율적인 일이 발생한다는 뜻이죠
이러한 비효율을 해결하기 위해 가상 DOM이 등장했습니다.
가상 DOM 동작 원리
가상 DOM은 실제 DOM의 가벼운 복사본입니다. 실제 화면에 그리는 것이 아니라 메모리 상에만 존재하기 때문에 속도가 매우 빠릅니다.
- 데이터 변경: 데이터가 업데이트되면 전체 UI를 가상 DOM에 리렌더링합니다
- 비교: 이전 가상 DOM과 현재 가상 DOM을 비교하여 실제로 바뀐 부분만 찾아냅니다.
- 재조정/패치: 바뀐 부분만 실제 DOM에 적용합니다.
가상 DOM의 장점
가상 DOM의 핵심은 단순히 빠르다는 것보단 효율적이라는 데 있습니다.
여러 개의 변화가 생겨도 가상 DOM에서 이를 먼저 다 계산한 뒤, 실제 DOM에는 딱 한 번만 반영하는 일괄 업데이트를 수행합니다.
덕분에 브라우저가 화면에 다시 그리는 횟수를 획기적으로 줄여줍니다.
비유하자면,
실제 DOM: 방 인테리어를 바꿀 때마다 가구를 하나씩 옮기며 확인하는 것
가상 DOM: 설계도상에서 가구 배치를 다 끝내보고, 최종 확정된 도면대로 딱 한 번만 가구를 옮기는 것
'Front-End' 카테고리의 다른 글
| 프론트엔드 상태관리? immer으로 간단하게 (0) | 2026.03.10 |
|---|---|
| WebRTC, 화상통화 구현이 어려운 당신을 위한 (3) (0) | 2026.03.10 |
| WebRTC, 화상통화 구현이 어려운 당신을 위한 (2) (0) | 2026.03.06 |
| WebRTC, 화상통화 구현이 어려운 당신을 위한 (1) (1) | 2026.01.12 |
| NX와 함께하는 모노레포 알아가기 (0) | 2026.01.08 |
