버츄얼 돔과 리얼 돔의 차이

돔(DOM)이란?

DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.

 

DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다.

문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다.

 

가상 돔(Virtual DOM) 이란?

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신,

이를 추상화한 자바스크립트 객체를 구성하여 사용 

 

1. 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링함

 

2. 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교함 (가상 돔 끼리 비교)

 

3. 바뀐 부분만 실제 DOM에 적용이 됨

 

(컴포넌트가 업데이트 될때 , 레이아웃 계산이 한번만 이뤄짐)

 

작은 규모의 레이아웃(리플로우)이 여러번 발생하는 것보다

큰 규모의 레이아웃이 한 번 발생하는 것은 성능상의 큰 차이를 나타냄

리액트는 위와 같은 얕은 비교와 일괄 돔 업데이트 방식을 이용해 성능 향상을 이끄는 것