[React] 가상돔 (Virtual DOM)
일반적인 돔의 문제점을 개선하기위해 나온게 가상돔입니다.
어떠한 인터렉션에 의해 DOM에 변화가 발생하면 그 때 마다 Render Tree가 재생성 됩니다.
즉 모든 요소의 스타일을 다시 계산하는 과정을 거치게 됩니다..
인터렉션이 적은 웹이면 괜찮지만 만약 인터렉션이 많다면..?
작은 변화로 인해 위에 필요한 과정을 계속 거치게 되니 불필요하게 DOM을 조작하는 비용이 너무 크게 됩니다..
DOM의 변화로 인해 새로운 DOM 객체를 만드는건 어렵지 않지만
Layout 작업 및 Paint 작업은 많은 조작 비용을 필요로 하게 됩니다.
결국 성능상에 문제를 초래..
이러한 문제로 인해 나오게 된 것이 가상돔(Virtual DOM)입니다.
가상 돔이란 실제 DOM 을 메모리에 복사해준 것으로 생각하시면 됩니다.
실제돔 들은 API를 이용해 업데이트, 삭제등을 할 수 있었지만
가상돔은은 이용할 수 없습니다. 자바스크립트의 객체 형태로 메모리안에 저장되어 있습니다.
가상돔의 동작방식
리엑트에서는 항상 렌더링 이전의 객체(가상돔)과 렌더링 이후의 객체(가상돔) 을 가지고 있습니다.
그 두가지의 가상돔을 가지고 비교를 하게됩니다.
이전의 가상돔과 새롭게 바뀐 가상돔을 비교해서 새롭게 바뀐 부분만 실제 돔에 작용을 시켜줍니다.
바뀐 부분을 찾는 과정을 Diffing 이라고 부르며,
바뀐 부분만 실제 돔에 적용시켜주는 것을 재조정(reconciliation)이라고 부릅니다.
Reconciliation & Batch Update
리액트는 실제 DOM의 메모리 내 가상 표현을 유지하고 배치 업데이트와 동기화를 유지합니다.
이것을 조정이라고 합니다.
Batch Update란?
(일괄적으로 처리되는!)
state를 업데이트 할 때 한꺼번에 업데이트 해서 화면이 한번만 다시 그려지게 해줍니다.
정리
- 리액트의 가상돔은 실제 DOM과 같은 내용을 자바스크립트의 객체 형태로 메모리에 저장되어있는
복사본 입니다. - 리액트는 렌더링 이전의 내용을 담고있는 가상돔과 변경 이후에 보일 내용을 담고있는 가상돔을
가지고 있습니다. - 변경이 되기 전 가상돔과 변경된 후의 가상돔을 비교하는 과정을 Diffing이라고 합니다.
- Diffing을 통해서 변경된 부분을 파악후, 리액트는 Batch Update를 수행해서 실제 DOM에 한번에 적용
이와 같은 과정을 재조정(Reconciliation)이라고 합니다.