HTML을 지탱하는 것은 태그(tag)이다.
문서 객체 모델(DOM)에 따르면, 모든 HTML 태그는 객체이다. 태그 하나가 감싸고 있는 ‘자식’ 태그는 중첩 태그(nested tag)라고 부릅니다. 태그 내의 문자(text) 역시 객체이다.
이런 모든 객체는 자바스크립트를 통해 접근할 수 있고, 페이지를 조작할 때 이 객체를 사용한다.
document.body는 <body> 태그를 객체로 나타낸 것이고 아래 예시 코드대로 실행하면 화면 배경이 3초간 붉은색으로 바뀐다.
document.body.style.background = 'red'; // 배경을 붉은색으로 변경하기
setTimeout(() => document.body.style.background = '', 3000); // 원상태로 복구하기document.body의 배경색을 바꾸기 위해 style.background을 사용했다. 이외에도 innerHTML(해당 노드의 HTML 콘텐츠). offsetWidth(해당 노드의 너비(픽셀)) 등 다양한 프로퍼티가 존재한다.
DOM 구조
간단한 html을 통해 DOM 구조를 알아보자
<!DOCTYPE html>
<html>
<body>
<div>
<h1>Cities</h1>
<ul>
<li id="one" class="red">Seoul</li>
<li id="two" class="red">London</li>
<li id="three" class="red">Newyork</li>
<li id="four">Tokyo</li>
</ul>
</div>
</body>
</html>
DOM은 html 단위 하나하나를 객체로 생각하는 모델이다. 예를 들어 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있는데, 이런 구조를 트리 구조라고 한다.
가상 돔 (Virtual DOM)은 뭐지?
그럼 가상돔은 뭘까?
DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤져서 수정할 걸 찾고, 처음부터 싹 수정을 한다면 어떻게 될끼?
- 필요없는 연산이 너무 많이 일어난다
- 그래서 등장한 게 가상돔(Virtual DOM)
- 가상돔(Virtual DOM)은 메모리 상에서만 돌아가는 가짜 DOM
가상돔(Virtual DOM) 의 동작 방식
1. 기존 DOM 과 어떤 작업이 수행된 후 새로 그려진 DOM을 비교한다.
2. 바뀐 부분을 찾아서 그 부분만 갈아 끼운다.
3. DOM을 업데이트 한다.
프라고