브라우저의 동작방식
브라우저에 렌더링 엔진이 html 코드를 읽고 파싱하여 dom트리를 생성합니다.
그리고 css파일이나 html에 인라인으로 작성된 스타일 코드를 파싱하여 css dom을 구성합니다.
이렇게 만들어진 dom tree와 css dom을 결합하여 render tree가 만들어집니다.
render tree는 문서에 시각적인 구조를 나타냅니다.
그리고 layout단계로 넘어가게되는데
여기서는 뷰포트 내에서 생성된 rendertree의 각 노드들이 스크린상의 어느 공간에 위치해야할지가 결정됩니다.
position이나 size등이 여기서 계산됩니다.
마지막으로 이렇게 구성된 레이아웃을 실제로 화면에 그리는 repaint과정을 통해서 
브라우저 화면에 우리가 보는 ui가 나타나게 됩니다.
여기서 문제는 어떤 인터랙션에 dom에 변화가 발생하면 rendertreer가 그때마다 재생성된다는것입니다.
변화가 발생하면 모든 요소들의 스타일을 다시 계산하고 layout 즉, reflow과정을 거치고, 다시 repaint하는 과정까지 반복합니다.
예를들어 어떤 유저가 어떤 포스트에 좋아요 버튼을 삭제하거나 담아둔 장바구니 목록에서 상품을 삭제하거나, 어디 댓글을 남기면 전체 노드들이 처음부터 다시그려지는것 !!
불필요한 과정이 여기서 반복되겠죠? 시간도 많이들고 리소스 소모도 많이되고..
더군다니
spa를 많이쓰면서 dom tree를 즉각적으로 많이 변경할 일이 생기는데,
전체 페이지를 서버에서 매번 보내주는것이 아니라 브라우저단에서 자바스크립트가 관리하기 때문에,dom 조작을 더 효율적으로 할수있게끔 최적화가 필요해진것.
여기서 생겨난게 virtual dom이다.
Virtual DOM이란??
virtual dom은 dom의 복사본 이라고 할수있는데,
또 다른 표현으로는 virtual dom은 html의 추상화 버전입니다.
실제 dom object와 같은 속성들을 가지고 있지만, 실제 dom이 갖고있는 api는 갖고 있지 않습니다.
데이터가 변경되면 전체 ui는 virtual dom에 렌더링됩니다.
그리고 이전 virtual dom에 있던 내용과, 업데이트후에 내용을 비교해서
바뀐 부분만 실제 dom에 적용시킵니다 !
즉 virtual dom에 변경사항이 반영되면 원본 dom에 필요하 변화만 반영되어서 전체 real dom을 바꾸지 않고도 필요한 ui의 업데이트를 적용할수 있습니다.
이 부분에서 Virtual DOM이 빛을 발함 (장점)
만약 뷰에 변화가 있다면 그 변화는 실제 DOM에 적용되기 전에 가상의 DOM에 먼저 적용시키고 그 최종적인 결과를 실제 DOM으로 전달해준다.
이로써, 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선되는 것.
DOM조작의 실제문제?
문제는 각 조작이 레이아웃 변화, 트리 변화와 렌더링을 일으킨다는 것.
만약 몇십개의 노드를 하나하나 수정하면, 몇십번의 레이아웃 재계산과 몇십번의 리렌더링을 토래한다는 것이다.
버츄얼 돔은 그냥 DOM 차원에서의 더블 버퍼링이랑 다름이 없는것이다.
변화가 일어나면 그걸 오프라인 DOM트리에 적용시키는 것. DOM트리는 렌더링도 되지 않기때문에 연산 비용이 적다. 연산이 끝나고 나면, 최종적인 변화를 실제 DOM에 던져준다.
딱 한번만 던져준다. 이렇게 하나로 묶어 적용시키는 것이 연산.. 그니까 실제 렌더링 하는 횟수를 줄이는것.
사실 이 과정은 버츄얼 DOM없이도 이뤄질수 있다고 한다. 그냥 변화가 있을 때, 그 변화를 묶어 DOM fragment에 적용한 다음에 기존 dom에 던져주면 된다.
그러면 Virtual DOM이 해결하려고 하는 것은 무엇일까?
DOM fragment를 관리하는 과정을 수동으로 하나하나 작업할 필요 없이, 자동화하고 추상화하는 것이다.
뿐만 아니라, 만약 이 작업을 우리가 직접 한다고 하면, 기존 값 중 어떤게 바뀌고 어떤안 안바뀌었는지 계속 파악하고 있어야하는데(이렇게 하지 않으면 수정할 필요가없는 dom트리까지 업뎃하게될 수도 있기때문), 이것도 버츄얼 DOM이 이걸 자동으로 해주는거. 어떤게 바뀌었고 어떤게 안바뀌었는지 알아내준다.
DOM관리를 버츄얼DOM이 하도록 함으로써, 컴포넌트가 DOM조작 요청을 할 때, 다른 컴포넌트들과 상호작용을 하지 않아도 되고, 특정 DOM을 조작할 것이라던지, 이미 조작했다던지에 대한 정보를 공유할 필요가 없다. 즉, 각 변화들의 동기화 작업을 거치지 않으면서도 모든 작업을 하나로 묶을 수 있다는것.
