React의 Virtual DOM이란?

Virtual DOM은 DOM의 라이트 버전이라고 할 수 있다.

처음 렌더링이 될 때에 DOM과 VDOM이 생성된다.

이후 업데이트가 될 때마다 VDOM을 다시 생성하고 이전의 VDOM과 비교하여 어떤 객체가 달라졌는지 파악한다.

VDOM은 가볍기 때문에 업데이트를 할 때마다 다시 생성한다고 해도 부담스럽지 않다.

VDOM의 차이를 통해 알아낸, 변경이 필요한 객체를 실제 DOM에서 업데이트 한다.

 

이점

1. 다루기 무거운 DOM을 이용해서 달라진 점을 파악하지 않고 가벼운 VDOM을 비교하므로 어디를 업데이트 해야하는지 파악하는 데에 필요한 리소스를 줄일 수 있다.

2. 부분 변경시 전체를 업데이트 했던 이전 프레임워크를 극복하고 변경된 부분만 업데이트한다.

 

참고 :

www.codecademy.com/articles/react-virtual-dom

reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/