React와 Vue에서는 화면에 보여지는 데이터가 변경되면 virtual DOM에 렌더링됩니다.
그 후, 이전 virtual DOM에 있던 내용과 비교해서, 변경된 부분만 real DOM에 적용되게 합니다.
그러면 여기서 real DOM과 virtual DOM은 뭘까요?
💡 학습 목표: Javascript에서의 DOM에 대해 알아보고, DOM과 virtual DOM의 차이점에 대해서 이해해봅시다.
브라우저: 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램(MDN)
예) Chrome, Firefox, Safari, Opera …
렌더링: 서버로부터 HTML, CSS, JavaScript 등 작성한 파일을 받아 브라우저에 뿌려주는 것
Parsing
HTML파일과 CSS파일을 서버로부터 받아와 parsing하여 DOM tree와 CSSOM tree를 생성
Style
두 트리를 합쳐 Rendering Tree를 생성
Layout/Reflow
Rendering Tree에서 각 노드의 위치와 크기를 계산
Painting(repaint)
계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어 생성
Composite
레이어를 합성하여 실제 화면에 출력
브라우저 렌더링 엔진
은 웹 문서를 parsing하여 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 올림 → DOM
DOM Tree
라고 부름[DOM을 사용하는 API들의 목록]
document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.setAttribute
element.getAttribute
element.addEventListener
// DOM 조작 예시
document.querySelector(‘#title”).style.color = “red”;
→ 이러한 문제를 해결하기 위해서 virtual DOM이 등장!
Virtual DOM
html
<ul id="items">
<li>Item 1</li>
<li>Item 2</li>
</ul>
javascript
let domNode = {
tagName: "ul",
attributes: {
id: "items",
},
children: [
{
tagName: "li",
textContent: "Item 1",
},
{
tagName: "li",
textContent: "Item 2",
},
],
};
React의 두 개의 가상돔
1. 렌더링 이전 화면 구조를 나타내는 가상돔
2. 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상돔
💡
Diffing
Algorithm: virtual DOM이 업데이트되면, React는 virtual DOM을 이전 virtual DOM의 스냅샷과 비교하여 바뀐 부분을 검사
Diffing 알고리즘을 통해 확인한 새로 바뀐 부분들을 DOM object에 적용 → 재조정(reconciliation)
정보만 제공하고, 사용자의 interaction이 많지 않은 페이지라면 Real DOM이 성능이 더 좋을수도 있다.
💡 SPA로 제작된 큰 규모의 웹페이지는 Virtual DOM을 활용하여 브라우저의 연산 양을 줄여 성능 개선에 도움을 줄 수 있다.
브라우저 렌더링 과정에 대해서 더 알아보고 싶다면…!?
브라우저는 어떻게 동작하는가?
참고자료
PoiemaWeb
[10분 테코톡] 🥁 지그의 Virtual DOM
브라우저 렌더링 과정 이해하기.