어떻게 우리에게 DOM구조로 보여졌을까?
1. DOM tree 생성(html 을 파싱하여 DOM 노드로 이뤄진 트리 생성)
2. Render tree 생성(css을 파싱하여 CSSOM생성/ DOM +CSSOM = Render tree)
3. Layout(Render tree 노드들의 위치 결정)
4. Paint(그려서 보여주기)
문제는 변화가 생길때마다, 다시 tree를 전부 생성한다는 것(예를들어 인스타에서 우리가 좋아요를 누르면 좋아요를 누른 부분만 바뀌면 좋은데 그게 아니라 전체가 다시 다 tree가 생성되어서 보여진다는 것)
virtual DOM
virtual DOM은 어느 부분이 바뀌면 그 바뀐 부분을 바로 반영하지 않고 DIFFING 알고리즘을 통하여 어떤 부분이 달라졌는지 체크를 함. 그리고 그 전과 비교하여 바뀌어진 부분을 RE-RENDER하여 바뀐 부분만 바꿔주는 형식으로 진행이됨.
어떻게?
왼쪽과 다르게 오른쪽에서는 SPAN이 하나가 추가 되었는데 자바 스크립트의 객체 형식으로 하여 children에 데이터 하나가 추가가된걸 확인할수 있음
(우선 렌더링 되지않고 메모리에서 동작 =>이후 달라진 부분 한번에 적용하는 방식으로 동작됨)
따라서, 계속 상호작용을 가지고 가면서 지속적으로 페이지가 바뀌는 경우에 더욱 효율적으로 dom관리를 할 수 있게 됨.