Virtual DOM

Virtual DOM (가상돔)

• Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.
• virtual DOM은 브라우저 API 위에 있는 JavaScript 라이브러리에서 구현되는 개념입니다.

리액트의 가상돔은 실제DOM의 복사본으로 두개의 복사본을 가진다.
이 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어진다.
첫번쨰는 랜더링 이전의 화면구조 이고 두번째는 랜더링 이후의 화면구조이다.
리액트트는state가 변경될때 마다 화면이 변경되는 때 이떄 두개의 가상돔을 비교해서 변경된 부분이 diffing 과정을 통해서 바뀐부분만 브라우저에 BatchUpdate로 한꺼번에 적용시켜줍니다. 이러한 과정은 Reconsiliation,재조정이라고 한다.

DOM (DocuementObjectModel)
hmtl 트리구조로 표현한것이다.

DOM의 구조
브라우저가 현재페이지의 HTML을 탐색하면서 element들을 찾고 해당 element와 자녀 element를 제거한뒤 수정한다음에 교체해준다. UI를 다시 그려주는 작업은 꽤나 긴 작업이 된다.