[React] 브라우저 원리 - 가상돔이란?

서버에서 HTML문서를 브라우저에 전달되면 브라우저가 문서에 따라서 화면을 보여준다.

HTML은 DOM Tree 생성하고, CSS는 CSSOM을 생성한다. 이것들을 합쳐서 Render Tree를 만들고 레이아웃단계와 페인트 단계를 거쳐서 화면에 보여준다.

! 여기서 문제점은 어떤 인터렉션에 의해 DOM에 변화가 발생하면 그때마다 Render Tree가 재생성된다. 

즉 모든 요소들의 스타일을 다시 계산함 (레이아웃 -> 리페인트 과정 다시 반복)

작은 변화로 인해 불필요하게 DOM 조작하는 비용이 크게 된다

이러한 문제로 인해 Virtual DOM이 나왔다.
가상 돔은 실제 돔을 메모리에 복사해 준 것으로 생각하면 됨

데이터가 바뀌면 가상돔에 렌더링 되고, 이전 가상돔과 비교해서 바뀐 부분만 실제 돔에 적용한다. 

Diffing: 바뀐 부분을 찾는 과정
reconcilation: 바뀐 부분만 실제돔에 적용시켜주는 것

*가상돔 덕분에 요소가 100개가 변했어도 한번에 실제돔에 수정 처리되어 돔을 조작하는 비용을 줄이게 된다.