Virtual DOM

Virtual DOM

가상 돔(Virtual DOM)이란 일종의 돔(DOM)의 메타데이터, DOM의 요약본이라고 할 수 있다.
가상 돔을 알기 위해서는 일단 돔을 알아봐야 할 필요가 있다.

DOM?

DOM은 The Document Object Model의 약자로 HTML, XML 문서의 프로그래밍 인터페이스 이다.
이 돔은 문서의 구조화된 표현을 제공하여 프로그래밍 언어가 돔 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

예시로 자바스크립트의 document.getElementById와 같은 HTML 태그에 직접 접근하는 것을 의미한다.

리액트 가상 돔(Virtual DOM)

리액트는 실제의 돔의 변경 사항을 빠르게 파악하고 반영하기 위해 내부적으로 가상 돔을 만들어서 관리한다.
이는 성능 향샹을 위해 실제 렌더링 된 UI를 내부적으로 자바스크립트 객체로 따로 관리한다.

리액트가 가상돔을 반영하는 절차

• 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링 한다.
• 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교한다.(가상 돔 끼리 비교)
• 바뀐 부분만 실제 DOM에 적용이 된다. (컴포넌트가 업데이트 될때, 레이아웃 계산이 한번만 이루어짐)

작은 규모의 리렌더링이 여러번 발생하는 것보다 큰 규모의 리렌더링이 한 번 발생하는 것은 성능상의 큰 차이를 나타낸다.
리액트는 위와 같은 얕은 비교와 일괄 돔 업데이트 방식을 이용하여 성능 향상을 이끄는 것이다.

출처 : [React] 가상돔 Virtual DOM이란?