- 본인이 이해한 리액트의 가상돔에 대한 정리입니다. -
리액트는 실제 DOM과 완전히 똑같은 2개의 가상돔을 생성한다.
리액트는 가상돔(Virtual DOM)이라는 것을 적용했다. 웹 개발에서 DOM(Document Object Model)의 변경을 관찰하고 최적화하는 기술을 가상돔(Virtual DOM) 이라 한다.
가상돔은 자바스크립트에서 DOM(Document Object Model)과 완전히 똑같은 복사체이다.
리액트는 실제 DOM과 완전히 똑같은 복사체인 가상돔을 두 개 생성하는데, 하나는 렌더링 이전의 가상돔, 다른 하나는 렌더링 이후의 가상돔이다. 즉, 변동사항을 반영할 가상돔과 읽기 전용인 가상돔을 생성한다.
리액트는 두 가상 돔을 비교해서 변동사항만 실제 DOM 에 반영한다.
리액트는 앞서 두 가지 가상돔을 서로 비교하여, 변동사항이 존재하는 부분을 찾는다.
이 때, 리액트는 변동 사항을 실제 DOM에 적용하기 위해 배치 업데이트 라는 것을 실행한다.
여기서, 배치 업데이트란 변경 사항을 모아서 한 번에 처리하는 방법으로 실제 DOM에서 변경이 필요한 부분을 나눠서가 아닌 단 한 번에 처리한다.
이러한 과정을 거쳐서 리액트는 변동사항만 빠르게 캐치하여 업데이트하고 기존에 변동되지 않은 DOM 요소는 업데이트되지 않고 기존 상태를 유지할 수 있도록 한다.
요약하자면
리액트는 실제 DOM 과 완전히 똑같은 두 가지의 가상의 DOM 을 생성하고, 하나의 가상 돔은 변동 사항을 반영하고, 다른 가상 돔은 변동이 없는 원본 상태로 둔다. 그리고 두 가상 돔 간에 차이점을 비교해서, 차이가 나는 부분만 실제 DOM에 반영하는 방식으로 렌더링 및 어플리케이션의 성능을 최적화한다.
