dom에 변화가 생기면, 렌더트리를 재생성(모든 요소들의 스타일이 다시 계산됨) 하게 됩니다.

복잡한SPA에서는 dom조작이 많이 발생하게 되는데, 결국 전체적인 프로세스를 비효율적으로 만들게 됩니다.

이때 virtual dom을 사용하면 실제 DOM 에 적용되기전에 가상의 DOM 에 먼저 적용시키고 그 최종적인 결과를 실제 DOM 으로 전달하게 되기때문에,,

브라우저 내에서 발생하는 연산의 양을 줄일 수 있게 되어 성능이 개선됩니다.

virtual dom

브라우저 렌더링 workflow

DOM조작시 브라우저는 위 링크와 같은 과정을 거치게 된다.
즉, DOM에 변화가 생기면 렌더트리를 재생성하기 때문에 위 과정이(노드 하나가 수정되면 레이아웃 재계산과 리렌더링이 일어남) 계속해서 반복된다.

복잡한 SPA의 경우에는 DOM조작이 많이 발생하게 되는데 따라서 브라우저가 연산을 많이 하게 되어 결국 전체적인 과정을 비효율적으로 만들게 된다.

virtual DOM은 무엇?

뜻 그대로 실제 돔에 적용시키기 전 단계에서 가상의 오프라인 돔트리이다.
가상 돔트리는 렌더링이 되지 않고, 많은 변화들을 하나로 모아 실제 돔트리에 최종결과를 전달하는 역할을 한다. (DOM fragment)
가상돔트리는 렌더링이 되지 않기 때문에 연산비용도 적고, 한번만 실제 돔트리에 변화를 주기 때문에 연산을 줄여주는 준다.

virtual DOM 역할

변화가 생기면 
-> DOM fragment에 변화를 적용 
-> 실제DOM에 한번에 전달하는데
-> 이러한 DOM fragment를 관리하는 과정을 자동화하고 추상화하는 것

디테일하게 보자면 ,

• 변화감지
  기존 값 중 어떤것이 바뀌었고 유지가 되었는지 자동으로 감지해준다.
  (수정할 필요 없는 DOM트리 업데이트를 방지)
• 작업을 하나로 동기화
  각 변화들의 동기화 작업을 거치지 않아도 모든 작업을 하나로 묶어줄 수 있다.
  

*참고
https://developer.mozilla.org/ko/docs/Web/API/Document/createDocumentFragment
https://velopert.com/3236