브라우저의 WorkFlow

1. DOM Tree 생성
2. Render Tree 생성 - 스타일 정보를 객체로 반환
3. Layout (Reflow) - 각 노드(태그)들의 스크린 좌표 측정
4. Painting - 측정한 좌표를 토대로 화면에 그림

DOM을 조작하면 …

• 랜더트리 재생성
  • 모든 요소들의 스타일을 다시 계산
• 레이아웃을 만들고 페인팅하는 과정을 다시 반복
• DOM 하나가 조작되면 위의 작업이 다시 반복된다

왜 VirtualDOM을 써야하는 가?

• 뷰가 변할 때 변화 하나하나에 대응하는 것이 아닌 Virtual DOM에 먼저 적용한 뒤 최종 결과를 DOM에 전달함으로써 연산을 줄일 수 있다.
• DOM 노드 30개를 수정하면 reflow와 redraw가 30번이 일어날 수 있다.
  • 이 부분을 한 번에 묶어서 처리하기 위해 Virtual DOM을 사용하는 것
• 위의 내용에 더해 Virtual DOM은 이런 최적화 과정을 자동화하고 추상화한 것이다.
  • 어떤 노드의 내용이 바뀌었는지, 어떤 state가 바뀌었는지 체크해주고 그 부분만 수정하는 과정

Reference

• https://velopert.com/3236