✔️ DOM?
❗️DOM: Document Object Model
문서 객체 모델
웹 페이지를 이루는 태그 들을 자바스크립트가 이용할 수 있게 끔 브라우저가 트리 구조로 만든 객체 모델
DOM은 웹 페이지( HTML이나 XML 문서 ) 의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스 이다. 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게 끔 연결시켜주는 역할을 하는데 document node( 문서 노드 ), element node( 요소 노드 ), attribute node( 속성 노드 ), text node( 텍스트노드 )로 구분된다.
1. document node( 문서노드 )
document node는 DOM Tree에서 최상위 루트 노드를 나타내며, document 객체를 가리킨다. HTML 문서 전체를 나타내는 노드, 즉 하나의 HTML 문서에 오로지 1개만 존재하는 노드이다.
2. element node( 요소노드 )
모든 HTML 요소( body, h1, div 등 )가 해당한다. attribute node( 속성노드 )를 가질 수 있는 유일한 노드이고, 부모-자식 관계를 가지기 때문에 계층적 구조를 이룰 수 있다.
3. attribute node( 속성노드 )
모든 HTML 요소의 속성, 즉 요소 노드에 대한 정보를 가지는 노드이다. 부모 노드가 아닌 해당 노드와 연결( 바인딩 ) 되어 있다.
4. text node
HTML 문서의 거의 모든 텍스트가 해당된다. 정보를 표현하며, 가장 마지막에 위치하는 자식 노드이기 때문에 '리프 노드'라고도 불린다.
✔️ cons?
1. 메모리 누수와 속도
DOM은 어떠한 변화가 발생할 경우 매 단계마다 모든 document 객체들을 훑으며 찾아가는 현상이 발생한다. 이는 메모리 누수와 직결되고 이 과정 동안 css를 매번 다시 연산하고 레이아웃을 구성한 뒤 웹페이지를 렌더링 하므로 속도 저하를 가져온다.
2. 코드량
직접 DOM의 태그에 접근 하기위한 메서드가 매우 길다! ( document.getByElementById('name'))
❓ Virtual DOM
📌 실제 ( 무거운 ) DOM의 가벼운 사본 같은 개념
위에서 알아본 단점을 보완하기 위해 Virtual DOM 개념이 등장했다 !
Virtual DOM을 활용하면 변화가 발생할 시 변화된 버전의 가상 돔을 생성하고 전체 UI를 가상돔에 리렌더링한다. 기존의 가상돔과 변화된 버전의 가상돔을 비교하고 가상돔 사이에 변화된 부분만 실제 돔에 적용함으로써 레이아웃 계산을 한번만 이행하도록 한다.
작은 규모의 레이아웃( 리플로우 )이 여러 번 발생하는 것 보다 큰 규모의 레이아웃이 한번 발생하는 것은 성능 상에 큰 영향을 미친다 !
