DOM (Document Object Model)
DOM은 HTML, XML document와 상호작용하고 표현하는 API이다. DOM은 browser에서 로드되며, Node(이하 노드) 트리(각 노드는 document의 부분을 나타낸다)로 표현하는 document 모델이다.
DOM은 브라우저에서 로드되는 것이기 때문에 각자의 IDE에서 작성한 HTML은 DOM이 아니고, 작성된 HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 노드 트리가 DOM이다. 그리고 이러한 DOM은 자바스크립트로 해당 문서에 노드 추가, 삭제, 변셩, 이벤트 처리, 수정 등을 가능케 하는 API를 제공한다.
IDE에 작성된 HTML은 단순한 문자열(string)일 뿐이며, 브라우저가 이해하기 위해서는 노드(객체)로 변환해야 한다.
즉 DOM은 HTML과 자바스크립트를 이어주는 공간으로, 내가 작성한 HTML을 자바스크립트가 이해할 수 있도록 객체(object)로 변환하는 것이다.
🔥 정리
브라우저가 HTML의 문자열을 읽이 위해서는 노드(객체)로 변환 되어야 하는데 DOM이 그 역활을 한다. DOM은 HTML과 자바스크립트를 이어주는 공간으로 작성한 HTML을 자바스크립트가 이해할 수 있도록 객체로 변환하는 것이다.
DOM의 브라우저 동작 원리
브라우저가 HTML을 전달 받으면, 곧 이를 변환(파싱)하고 노드들로 이루어진 DOM 트리를 만든다. 그 후, 외부의 CSS 파일과 각 노드들의 inline 스타일을 파싱하여 스타일을 입힌 Render 트리를 만든다.
Render 트리가 만들이지면, 각 노드들이 화면에서 정확히 어디에 나타나야 하는지에 대한 위치가 주어진다. 그 후, paint() 메서드를 호출하면 내가 구현하고 싶었던 화면이 출력된다.
DOM은 해당 과정을 계속 반복한다. 즉, 오타 수정, 문구 제거 혹은 이미지를 첨부하는 사소한 일을 하더라도, DOM은 처음부터 다시 HTML을 파싱하여 DOM 트리를 만들고 CSS를 파싱하여 Render 트리를 만들고, 레이아웃을 입혀 출력한다. 비효율적이기 떄문에 Virtual DOM이 등장하였다.
🔥 자세한 동작 방식
1. DOM Tree 생성
브라우저가 HTML을 전달 받으면 브라우저의 렌더 엔진이 이를 파싱해서 DOM 노드로 이루어진 트리를 만듭니다.
2. Render Tree 생성
DOM 트리의 노드들의 attach 메소드가 실행된다. attach 메소드는 스타일 정보를 계산해서 객체 형태로 반환합니다. 다시 말해 렌더 트리 과정에선 각 요소들의 스타일이 계산되고 이 계산되는 과정에서 다른 요소들의 스타일 속성들을 참조합니다.
3. Layout (reflow)
렌더 트리가 만들어지고 나면 각 노드들은 스크린의 좌표가 주어지고 정확히 어디에 나타나야 할지 위치가 주어집니다.
4. Painting
렌더링된 요소들에 색을 입히는 과정, 트리의 각 노드들을 거쳐가며 paint 메소드를 호출합니다.
Virtual DOM
Virtual DOM은 DOM을 직접 조작하지 않고 변경사항을 하나의 가상 돔에 모았다가 DOM에 한 번에 보내는 기술이다.
Virtual Dom(이하 가상 DOM)은 수정사항이 여러 가지 있더라도, 가상 DOM은 한 번만 렌더링을 일으킨다. 가상 DOM은 DOM이 생성되기 전, 이전 상태 값과 수정사항을 비교하여 달라진 부분만 DOM에게 한 번에 전달하여 딱 한 번만 렌더링을 진행한다.
- DOM 조작의 연산 비용을 줄일 수 있는 방법으로 나온 대안이 Virtual DOM 이다.
- React는 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해 내부적으로 가상 DOM을 만들어서 관리한다.
- 뷰에 변화가 있을 때 실제 DOM에 적용되기 전에 가상의 DOM에 먼저 적용시키고그 최종적인 결과를 실제 DOM으로 전달해줍니다. 이는 브라우저 내에서 발생하는 연산의 양을 줄여준다.
빨간 부분에 수정사항이 생겼다면, 가상 DOM이 알아서 달라진 값을 탐지하여 변경하고 최종적인 결과물을 실제 DOM에 전달한다. 만약 가상 DOM이 없었다면, DOM은 렌더링을 처음부터 해야했기 때문에 모든 동그라미가 다 빨간색으로 바뀌었을 것이다.
