[React] Virtual DOM

 

 

Virtual DOM이란?

Virtual DOM은 실제 DOM(Document Object Model)을 모방한 가상의 트리구조이다. 실제 DOM에서는 수정이 일어날 때 마다 DOM을 업데이트 하기 때문에 성능면에서 불리하다. 이런 단점을 해결하기 위해 사용되는 개념이 Virtual DOM이다.

 

 

Virtual DOM은 동시에 발생한 업데이트를 모아서 DOM을 한 번만 수정할 수 있도록 도와준다. React에서 실제 업데이트가 일어나도 실제 DOM을 바로 수정하지 않는다. React는 Virtual DOM에 업데이트가 모두 일어날 때 까지 기다렸다가 더 이상 업데이트가 일어나지 않으면, 동시에 일어난 업데이트를 한 번에 실제 DOM에 업데이트를 한다. 

 

 

브라우저 렌더링과의 관계

 

 

브라우저는 HTML을 파싱하여 DOM객체를 생성하고 CSS를 파싱하여 스타일규칙을 만들고, 이 두개를 합쳐 렌더트리를 만든다. 이 렌더트리를 기준으로 레이아웃을 배치하고 페인팅을 하게 된다. DOM에서 수정이 일어날 때 마다 업데이트를 하게 된다면, 업데이트에 따른 레이아웃을 다시 배치하고 페인팅을 다시 하기때문에, 리플로우와 리페인팅이 자주 일어나게 되고 이로 인해 성능저하로 이어진다.

 

 

실제로는 DOM을 제어하는 메서드에 따라 브라우저가 업데이트 항목을 어느 정도 모아서 업데이트하기도 한다. 이를 배치(Batched DOM Update)라고 한다. 그러나 렌더링을 여러번 하는 방식이 비효율적인 것이다.