브라우저의 렌더링

➕ 렌더링이란?

• HTML, CSS, JavaScript 등 개발자가 작성한 문서를 브라우저에서 출력하는 과정

➕ 렌더링 엔진

• 대부분의 브라우저는 렌더링을 하는 렌더링 엔진을 가지고 있는데, 각 브라우저마다 사용하는 렌더링 엔진은 아래와 같다

크롬 : 웹킷(Fork) ⇒ 블링크 (Blink)
Fork: 소스코드를 가져와 독립적인 새로운 소프트를 개발하는 것
사파리 : 웹킷(Webkit)
파이어폭스 : 케코엔진(Gecko)

💡 렌더링 과정

1. HTML, CSS 를 다운로드
2. 다운받은 HTML, CSS ⇒ Object Model로 만듦 (HTML → DOM, CSS → CSSOM)

2-1. HTML → DOM(Document Object Model)

2-2. CSS → CSSOM (CSS Object Model)

2-3. DOM과 CSSOM 이용 → Render Tree를 생성

3. Layout

• 레이아웃 단계는 *뷰포트(Viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산합니다.
• 즉, 브라우저 화면의 어떤 위치에 어떤 크기로 출력될 지 계산하는 단계라고 할 수 있습니다.

(* 뷰포트(Viewport)는 그래픽이 표시되는 브라우저의 영역, 크기/ 뷰토트는 모바일의 경우 디스플레이의 크기, PC 의 경우 브라우저 창의 크기에 따라 달라진다.)

4. Paint

• Layout 계산이 완료되면 요소들을 실제 화면에 그린다.

💡 정리

1. 주소창에 구글 입력
2. 구글 서버로 찾아간다.
3. *DNS가 연결해줄 곳을 찾음 (DNS(Domain Name System) - 실제 서버가 어디 있는지 알고 있는 서버)
4. 서버에서 HTML 파일을 클라이언트로 보냄
5. HTML 파일 파싱 및 DOM tree 생성
6. link 태그를 만나 css 파일 및 CSSOM 트리 생성
7. DOM, CSSOM 합쳐 Render Tree 생성
   8-1. JavaScript를 만나면? HTML 파서는 JS 코드를 실행하기 위해 파싱 중단
   8-2. JS 엔진 실행 및 JS 코드 파싱

➕ 브라우저의 렌더링 과정 이미지

➕ React - virtual DOM

Virtual DOM이란?

• virtual DOM을 이용하면 실제 DOM에 접근하여 조작하는 대신에, 이를 추상화시킨 자바스크립트 객체를 구성하여 사용합니다. (실제 DOM의 가벼운 사본)

Virtual Dom이란 => 쉽게 말해서?

• DOM의 상태를 메모리에 저장하고 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영 하는 기능. => 성능 향상
  가상 DOM은 DOM의 상태를 메모리 위에 계속 올려두고 DOM에 변경이 있을 때만 해당 변경을 반영합니다.

실제 DOM에 업데이트 하는 절차

React에서 데이터가 변하여 브라우저 상의 실제 DOM에 업데이트 하는 과정은 3가지 절차를 밟습니다.

1.  데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링 합니다.
2.  이전 Virtual DOM에 있던 내용과 현재의 내용을 비교합니다.
3. 바뀐 부분만 실제 DOM에 적용이 됩니다.
(컴포넌트가 업데이트 될때 , 레이아웃 계산이 한번만 이뤄짐)

즉, REACT는 지속해서 데이터가 변화하는 대규모 애플리케이션 구축 을 위해서 탄생하였습니다