📍브라우저 랜더링을 위한 빌드업

User Interface: 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
Browser Engine: User Interface와 Rendering Engine 사이의 동작을 제어
Rendering Engine: 요청한 콘텐츠를 표시, HTML을 요청하면 HTML과 CSS를 파싱 하여 화면에 표시함
Networking: HTTP 요청과 같은 네트워크 호출에 사용됨
Javascript Interpreter(또는 Engine): 자바스크립트 코드를 해석하고 실행함. 크롬에서는 V8 엔진을 사용함
Display Backend: 기본적인 위젯(콤보 박스 등..)을 그림
Data Persistence: Local Storage, 쿠키 등 클라이언트 사이드에서 데이터를 저장하는 영역

DOM의 동작 과정

HTML 문서 파싱해서 DOM 트리를 만들고
CSS 문서 파싱해서 CSSOM 트리 만들고
CSSOM, DOM을 이용하여 렌더 트리를 만듬
렌더 트리 생성 끝나면 → Layout(Reflow)가 만들어짐
각 노드가 화면의 정확한 위치에 표시하기 위해 위치와 크기를 계산하는 과정
paint 과정 실행됨
계산된 위치와 크기 등의 스타일들이 실제 픽셀로 표시하는 과정

Virtual DOM 의 역할

어떤 인터렉션이 발생되면,
1. 실제 DOM에 적용되기 전에 가상의 DOM에 먼저 적용시킨다.
2. 그 후 최종적인 결과를 실제 DOM에 전달한다.
→ 이렇게 되면 실제 DOM은 최종 결과만 전달 받기 때문에 브라우저 내에서 발생하는 연산의 양이 줄어들고 성능이 개선된다.
DOM 관리를 Virtual DOM이 하도록 함으로써
컴포넌트가 DOM 조작 요청을 할 때 다른 컴포넌트들과 상호작용을 하지 않아도 된다. 각 변화들의 동기화 작업을 거치치 않고 모든 작업을 하나로 묶어준다.

출처: https://velog.io/@devjooj/React-React-%EB%8F%99%EC%9E%91-%EB%B0%A9%EB%B2%95-Virtual-DOM