TIL29-05 DOM과 Virtual DOM

1. Dom

• 웹페이지를 문서(document)라고 하구요. 페이지를 이루는 컴포넌트를 엘리먼트(element)라고 한다.
• DOM은 이 엘리먼트를 tree 형태(= DOM TREE)로 표현한 것이다.
• 트리의 요소 하나하나를 ‘노드’라고 부른다. 각각의 ‘노드’는 해당 노드에 접근과 제어(DOM 조작)를 할 수 있는 API를 제공한다.
• Dom 을 조작할 수 있는 대표 API

// id가 demo인 녀석을 찾아, 'Hello World!'를 대입해줘.
document.getElementById("demo").innerHTML = "Hello World!";

// p 태그들을 모두 가져와서 element 변수에 저장해줘
const element = document.getElementsByTagName("p");

// 클래스 이름이 intro인 모든 요소를 가져와서 x 변수에 저장해줘
const x = document.getElementsByClassName("intro");

2. 가상DOM(Virtual DOM)

• 가상DOM은 실제 DOM과 구조가 완벽히 동일한 복사본 형태.
• 실제 DOM은 아니지만, 객체(object) 형태로 메모리에 저장되기 때문에 실제 DOM을 조작하는 것 보다 훨씬 더 빠르게 조작을 수행할 수 있다.
• 복제된 가상DOM과 변화가된 가상DOM 2개를 파악하고, 변경이 일어난 그 부분만 실제 DOM에 적용시킨다. 적용시킬 때는, 한건 한건 적용시키는 것이 아니라, 변경사항을 모두 모아 한 번만 적용을 시킨다.(Batch Update)