React Virtual Dom (가상돔)

React의 주요 특징 중 하나는 가상돔을 사용한다는 것이다.
가상돔을 왜 사용하는지 알기 위해 브라우저가 렌더링 하는 과정을 알아보자.

[ 웹 페이지 빌드 과정 (Critical Rendering Path CRP ) ]

브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있다.
아래는 브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정이다.

1. 렌더 엔진이 서버러부터 문서를 읽어들여서 파싱하고 어떤 내용을 페이지에 렌더링 할 지 결정한다.
    ( Dom Tree 생성)
2. DOM 과 CSSOM을 결합해 화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함시킨
	최종 렌더링 트리를 만든다. 즉, 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함
    ( Render Tree )
3. 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산한다. ( Layout )
4. 실제 화면을 글니다. (Paint)

여기서 문제점은 인터렉션에 의해 DOM에 변화가 발생할 경우 그 때 마다 Render Tree가 재생성된다. 즉, 모든 요소들의 스타일을 다시 계산해 Layout, Repaint 작업이 일어나 부하가 발생한다.

이러한 문제점을 보완하기 위해 Virtual Dom(가상돔)의 개념이 나오게 되었다.

[ Virtual DOM 원리 ]
Virtual DOM은 실제 DOM을 메모리에 복사해 놓은 것이다. 인터렉션이 발생해 변경된 사항들은 Virtual DOM에 적용되고 실제돔과 비교하여 바뀐 부분만 리렌더링 시킨다.

1. 변경된 사항은 가상돔에 렌더링 된다.
2. Diffing 과정을 통해 실제 돔과 가상돔의 변경사항을 찾는다.
3. 바뀐 부분만 실제 돔에 reRendering 시켜준다.
*** 반복되는 태그에 key 속성이 들어가는 것도 해당 태그의 변경 여부를 판다하기 위함이다.