Virtual DOM을 알아보기 전에 HTML이 웹 브라우저에 표현되기까지의 과정을 이해하는 것이 필요하다.
✔브라우저 Rendering Workflow
▶ HTML
<div> ~~ <div> 와 같은 elements로 이루어진 HTML을 브라우저에 전달한다.
▶ HTML parsing
브라우저 Render Engine이 코드를 분석(parsing)한다.
▶ DOM Tree
elements를 기준으로 DOM nodes를 생성하고 이 DOM nodes로 이루어진 DOM tree를 만든다.
▶ Render Tree
DOM tree에 node가 생성될 때마다 동기적으로 attach method를 실행하여 그에 따른 Render Tree를 생성한다.
*attach method : 외부 CSS 파일 또는 element의 inline style을 parsing하고 객체 형태로 반환한다.
▶ Layout
각 node의 스크린 상 좌표를 지정하여 위치를 잡는다.
▶ Painting
paint method 실행하여 색을 입힌다.
✔DOM Re-Render
정적인 HTML 페이지가 아닌 한 페이지에서 다양한 DOM 조작이 일어나는 SPA(Single Page Application)과 같은 경우에는 elements를 추가, 수정, 생성하는 등의 DOM 수정을 하게 되면 위에서 설명한 Render Tree 생성, Layout 생성, Paint 과정이 전부 re-computing, re-rendering된다. 이 문제점을 해결한 것이 virtual DOM이다. React, Vue에서 불필요한 리렌더링을 하지 않기 위해 virtual DOM을 사용한다.
✔virtual DOM(VDOM)이란?
local memory에 Virtual DOM을 생성하여 브라우저에서 Render 요청하기 전에 변경점을 비교하여 최종적으로 브라우저 DOM에 전달한 후 Render한다.
✔Virtual DOM을 쓰는 이유는?
컴포넌트에 변경점이 생기면 묶어서 DOM fragment에 적용한 다음 브라우저 DOM에 전달하면 되지만 이 과정은 어떤 부분이 바뀌었고 어떤 부분이 바뀌었는지 개발자가 직접 파악해야 한다. 이 역할을 자동화한 것이 virtual DOM이기 때문에 virtual DOM을 통해 DOM 관리를 하는 것이다. 제일 핵심적인 이유는 컴포넌트의 변경사항에 대해 불필요한 리렌더링이 일어나는 것을 막기 위해서 이다!!
'React.js' 카테고리의 다른 글
21.11.06 import {} or not (0) | 2021.11.06 |
---|---|
21.09.04 컴포넌트 생성 단축키 (0) | 2021.09.04 |
21.04.28 useSelector, useEffect, useDispatch (0) | 2021.04.30 |
21.04.27 redux, axios 로그인 상태 관리 프로세스 (0) | 2021.04.27 |
21.04.10 redux 개념 (0) | 2021.04.14 |