DOM / Virtual DOM

브라우저 랜더링 과정 (브라우저 동작 방식)

 

먼저 브라우저에 렌더링 엔진이 html 코드를 읽고 파싱(분석)하여 ① DOM tree 생성

css파일이나 html에 inline으로 작성된 style코드를 파싱하여 DOM + CSSOM => ② CSS DOM 생성

이렇게 만들어진 DOM tree와 css DOM을 결합하여 render tree가 만들어짐

render tree는 문서에 시각적인 구조를 나타냄

③  Layout(reflow) - 뷰 포트 내에서 생성된 render tree의 각 노드들이 스크린 상에 어느 공간에 위치해야할지 결정됨(position, size 등이 여기서 계산 되는 것)

④ Paint(repaint) - 위에서 구성된 레이아웃을 실제로 화면에 그리는 repaint과정을 통해 브라우저 화면에 나타나 우리가 보는 UI 나타나게 됨

 

여기서 문제는 DOM에 어떤 변화가 발생하면 (예 : 좋아요 버튼 누르거나 댓글 남기기)

render tree가 그때마다 재생성된다는 것

변화가 발생하면 모든 요소들의 스타일을 다시 계산하고 

레이아웃, 페인트하는 과정까지 반복 

                     ↓

불필요한 과정이 반복되는 것!

 

요즘에는 SPA (싱글 페이지 어플리케이션)를 많이 사용하면서 DOM tree를 즉각적으로 변경할 일이 많이 생김

 

 

 

 

Virtual DOM

 

DOM의 친구이자 복사본 (가상의 DOM)

HTML DOM의 추상화 버전으로 실제 DOM이 가지고 있는 api는 가지고 있지 않음

데이터가 변경되면 전체 UI는 Virtual DOM에 렌더링 됨

그리고 이전 Virtual DOM에 있던 내용과 업데이트 후의 내용을 비교하여 바뀐 부분만 실제 DOM 에 적용

Virtual DOM에 변경사항이 반영되면 원본 DOM에 필요한 변화만 반영되어서

전체 real DOM을 바꾸지 않고도 필요한 UI만 업데이트를 적용할 수 있음

                      ↓

불필요한 렌더링 과정의 비효율성을 최소화

 

실제 DOM이 아닌 메모리 상에서 동작하여 속도가 훨씬 빠름

실제 렌더링이 되지 않기때문에 연산비용이 적음

 

리액트는 Virtual DOM을 이용하는 대표적인 자바스크립트 라이브러리 (JSX는 자바스크립트 확장 문법)