정의
Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신,
이를 추상화한 자바스크립트 객체를 구성하여 사용하는 것
절차
EX) 특정 페이지에서 데이터가 변했다고 가정 했을 경우.
- 리액트를 이용해 돔을 업데이트 시키는 절차
- 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링함
- 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교함 (가상 돔 끼리 비교)
- 바뀐 부분만 실제 DOM에 적용이 됨
(컴포넌트가 업데이트 될때 , 레이아웃 계산이 한번만 이뤄짐)
버츄얼돔을 사용하는 이유
작은 규모의 레이아웃(리플로우)이 여러번 발생하는 것보다
큰 규모의 레이아웃이 한 번 발생하는 것은 성능상의 큰 차이를 나타냄
리액트는 위와 같은 얕은 비교와 일괄 돔 업데이트 방식을 이용해 성능 향상을 이끄는 것
:D