Virtual DOM이란?

DOM

• 웹 페이지에 들어있는 HTML 엘리먼트들을 트리형태로 표현한 것. 돔이 제공하는 API를 통해 돔 구조에 접근하고 원하는 엘리먼트에 구조, 내용, 스타일 등을 마음대로 변경할 수 있다.

Virtual DOM

• 실제 돔과 같은 내용들을 담고있는 복사본
• 실제 돔이 아닌 자바스크립트 객체 형태인 메모리 안에 저장되어 있다.
• 실제 돔과 달리 브라우저 문서에 직접적 변경이 불가능하다.

굳이 왜 사용할까?

• DOM을 조작할 때마다 브라우저 UI를 새롭게 그려주는 작업은 꽤 복잡하고 시간이 걸리는 작업이다. Virtual DOM은 이러한 비효율적 동작을 빠르게 만들어준다.

• 리액트는 두 개의 가상 돔 객체를 갖고 있다. 첫 번째는 렌더링 이전 화면 구조를 나타내는 가상돔이고 두 번째는 렌더링 이후에 보이게될 화면 구조를 나타내는 객체이다.

• 리액트는 state가 변경될 때마다 화면이 새로 렌더링 되는데, 렌더링이 발생될 상황에 놓일때마다 새로운 화면에 들어갈 내용이 담긴 가상돔을 생성한다. 렌더링 이전에 화면의 내용을 담고있는 첫 번째 가상돔과 업데이트 이후 내용을 담고 있는 가성돔을 비교해서 어느 엘리먼트가 변했는지 찾아낸다(Diffing이라고 한다.)

• Diffing 이후에 Batch Update를 수행하는데 Batch Update란 변경된 모든 엘리먼트들을 집단으로 실제 DOM에 한 번에 적용시켜준다. 따라서 훨씬 빠르고 효율적이다.

• 이러한 과정들을 Reconsiliation(재조정)이라고 한다.