-
[React] Virtual DOM(가상돔)React.js 2022. 8. 2. 23:49반응형
1.먼저 DOM(The Document Object Model)부터 알아보자
DOM이란 XML이나 HTML 문서에 접근하기 위한 인터페이스 이고 스트립트 언어가 각각의 요소에 접근하는 방법을 제공합니다. 그리고 이것은 W3C의 표준 객체 모델이며 트리구조를 가지고 있습니다.
결국 DOM은 HTML또는 XML을 스크립팅언어(자바스크립트)와 서로 이어주는 역할을 합니다.
출처 : http://www.tcpschool.com/javascript/js_dom_concept 2. 가상돔 등장 배경
먼저 브라우저 렌더링 과정을 알아 보겠습니다.
1)DOM tree 생성 -렌더 엔진이 HTML을 파싱하여 DOM 노드로 이루어진 트리생성
2)render tree 생성 - css파일과 inline 스타일을 파싱 DOM + CSSOM = 렌더 트리를 생성
3)layout - 각 노드들의 스크린에서의 좌표에 따라 위치결정
4)paint - 실제 화면에 그리기
이렇게 4단계로 이루어 집니다.
그런데 웹페이지에서 좋아요를 누르거나 댓글을 달면(인터랙션에 의해 DOM에 변화가 발생하면) render tree(2번)부터 다시 생성하여 중복 되는 작업이 발생하게 되고 SPA와 같은 형태의 상태변화가 많은 애플리케이션을 더 효율적으로 DOM조작을 하기위해 Virtual DOM(가상돔) 나왔습니다.
3.Virtual DOM(가상돔)
가상돔은 실제 돔에 접근하여 조작하는 대신, 이것을 추상화시킨 자바스크립트 객체를 이용해서 조작하는 것입니다.
(실제 DOM의 가벼운 사본)
리액트가 가상돔을 반영하는 절차
1.데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링한다.
2.이전 Virtual DOM에 있던 내용과 현재의 가상돔을 비교한다.
3. 바뀐 부분만 실제 DOM에 적용한다.
작은 규모의 레이아웃(브라우저 렌더리 과정중 3))이 여러번 발생하는 것보다 큰 규모의 레이아웃이 한 번 발생하는 것은
성능상의 큰 차이를 나타냅니다. 리액트는 위와 같은 얕은 비교와 일괄 돔 업데이트 방식을 이용해 성능 향상을 하는 것입니다.
출처
http://www.tcpschool.com/javascript/js_dom_concept