* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다.
DOM과 브라우저 렌더링 과정
- DOM은 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.
- 브라우저의 렌더링 과정
- 브라우저가 사용자가 요청한 주소를 방문해 HTML 파일 다운로드 받음
- 브라우저의 렌더링 엔진은 HTML을 파싱해 DOM 노드로 구선된 트리(DOM)를 만든다.
- 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드 받음
- 브라우저 렌더링 엔진은 이 CSS 파일도 파싱해 CSS 노드로 구성된 트리(CSSOM)를 만든다
- 브라우저는 2번과정에서 사용자 눈에 보이는 노드만 순회하면서 방문함.
- display: none 방문X
- 눈에보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 스타일 정보를 노드에 적용
- 레이아웃 (layout, reflow) : 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정. 이 레이아웃 과정을 거치면 반드시 리페인팅 과정도 거치게 됨.
- 페인팅 (painting): 레이아웃 단계를 거친 노드에 색과 같은 실제 유효한 모습을 그리는 과정
가상 DOM의 탄생 배경
- 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다.
- 현대 웹페이지 : 렌더링 + 렌더링 이후 사용자의 인터랙션으로 웹페이지 업데이트 됨.
- SPA의 경우 페이지 변경 시 다시 HTML을 렌더링하는 것이 아닌 하나의 페이지에서 계속해서 요소의 위치를 재계산함. 즉, 라우팅 변경시 특정 요소를 제외하고는 대부분의 요소를 삭제, 삽입 위치 변경 과정의 작업을 진행해야됨
- DOM을 관리하는 과정에서 부담해야할 비용이 커짐
- 개발자는 DOM의 변경 상황보다는 결과물만 알고 싶음
- 가상 DOM : 실제 브라우저의 DOM이 아닌 리액트가 관리하는 가상의 DOM
- 웹페이지가 표시해야할 DOM을 일단 메모리에 저장하고 리액트가 실제 변경에 대한 준비가 완료 됐을때 실제 브라우저의 DOM에 반영한다. (여기서 리액트는 react-dom임)
- 브라우저가 아닌 메모리에서 DOM 계산을 하는 과정에서 렌더링을 최소화할 수 있고 브라우저, 개발자의 부담을 덜어줌
- 가상 DOM이 일반 DOM보다 무조건 빠른것은 아님( from 리액트 개발자 댄 아브라모프)
- 무조건 빠른 것이 아니라 리액트의 이 가상DOM방식은 대부분의 상황에서 웬만한 애플리케이션을 만들 수 있을 정도로 충분히 빠름, 합리적으로 빠르다는 것.
가상 DOM을 위한 아키텍처, 리액트 파이버
- 가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 리액트 파이버다.
- 리액트 파이버 : 리액트에서 관리하는 평범한 자바스크립트 객체
- 파이버는 파이버 재조정자 (fiber reconciler)가 관리하는데, 가상 DOM과 실제 DOM을 비교해 변경사항을 수집하며, 둘 사이에 차이가 있으면 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청함.
- 재조정(reconciliation) : 리액트에서 어떤 부분을 새롭게 렌더링해야하는지, 가상 DOM과 실제 DOM을 비교하는 작업.
- 리액트 파이버의 목표 : 리액트에서 발생하는 애니메이션, 레이아웃, 그리고 사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하는 것.
- 작업을 작은 단위로 분할, 우선순위 매김
- 이러한 작업을 일시중지하고 나중에 다시 시작할 수 있음
- 이전에 했던 작업을 다시 재사용하거나 필요하지 않은 경우 폐기할 수 있음.
- 모든 과정은 비동기로 일어남
- 과거 리액트의 조정 알고리즘은 스택 알고리즘으로 이뤄져 있었다.
- 스택이 빌 때 까지 동기적으로 작업이 이루어지고 중간에 중단할 수 없었음 : 비효율적
- 사용자 인터랙션 + 동시 다발적 이벤트와 애니메이션을 위해 스택 조정자 대신 파이버라는 개념을 탄생시킴
- 파이버는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 이후에는 가급적 재사용됨
- 리액트가 파이버를 처리할 때마다 이러한 작업을 직접 바로 처리하기도하고 스케줄링하기도 함
리액트 파이버 트리
- 두 개가 존재함
- 현재 모습을 담음 : 파이버 트리
- 작업중인 상태 : workInProgress 트리
- 리액트 파이버의 작업이 끝나면 리액트는 단순히 포인터만 변경해 workInProgress 트리를 현재 트리로 바꿔버린다. (= 더블 버퍼링)
- 불완전한 트리르 보여주지 않기 위해 더블 버퍼링 기법을 쓰는데, 버퍼링을 위한 트리 두개가 존재하며 이는 커밋 단계에서 수행됨.
'FrontEnd > React' 카테고리의 다른 글
| 모던 리액트 Deep Dive - useState, useEffect (0) | 2024.07.03 |
|---|---|
| 모던 리액트 Deep Dive - 메모이제이션 (0) | 2024.07.01 |
| 모던 리액트 Deep Dive - 렌더링은 어떻게 일어나는가 (1) | 2024.06.30 |
| 모던 리액트 Deep Dive - 가상 DOM과 리액트 파이버 (2) (0) | 2024.06.25 |
| 모던 리액트 Deep Dive - JSX란 (0) | 2024.06.23 |
* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다.
DOM과 브라우저 렌더링 과정
- DOM은 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.
- 브라우저의 렌더링 과정
- 브라우저가 사용자가 요청한 주소를 방문해 HTML 파일 다운로드 받음
- 브라우저의 렌더링 엔진은 HTML을 파싱해 DOM 노드로 구선된 트리(DOM)를 만든다.
- 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드 받음
- 브라우저 렌더링 엔진은 이 CSS 파일도 파싱해 CSS 노드로 구성된 트리(CSSOM)를 만든다
- 브라우저는 2번과정에서 사용자 눈에 보이는 노드만 순회하면서 방문함.
- display: none 방문X
- 눈에보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 스타일 정보를 노드에 적용
- 레이아웃 (layout, reflow) : 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정. 이 레이아웃 과정을 거치면 반드시 리페인팅 과정도 거치게 됨.
- 페인팅 (painting): 레이아웃 단계를 거친 노드에 색과 같은 실제 유효한 모습을 그리는 과정
가상 DOM의 탄생 배경
- 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다.
- 현대 웹페이지 : 렌더링 + 렌더링 이후 사용자의 인터랙션으로 웹페이지 업데이트 됨.
- SPA의 경우 페이지 변경 시 다시 HTML을 렌더링하는 것이 아닌 하나의 페이지에서 계속해서 요소의 위치를 재계산함. 즉, 라우팅 변경시 특정 요소를 제외하고는 대부분의 요소를 삭제, 삽입 위치 변경 과정의 작업을 진행해야됨
- DOM을 관리하는 과정에서 부담해야할 비용이 커짐
- 개발자는 DOM의 변경 상황보다는 결과물만 알고 싶음
- 가상 DOM : 실제 브라우저의 DOM이 아닌 리액트가 관리하는 가상의 DOM
- 웹페이지가 표시해야할 DOM을 일단 메모리에 저장하고 리액트가 실제 변경에 대한 준비가 완료 됐을때 실제 브라우저의 DOM에 반영한다. (여기서 리액트는 react-dom임)
- 브라우저가 아닌 메모리에서 DOM 계산을 하는 과정에서 렌더링을 최소화할 수 있고 브라우저, 개발자의 부담을 덜어줌
- 가상 DOM이 일반 DOM보다 무조건 빠른것은 아님( from 리액트 개발자 댄 아브라모프)
- 무조건 빠른 것이 아니라 리액트의 이 가상DOM방식은 대부분의 상황에서 웬만한 애플리케이션을 만들 수 있을 정도로 충분히 빠름, 합리적으로 빠르다는 것.
가상 DOM을 위한 아키텍처, 리액트 파이버
- 가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 리액트 파이버다.
- 리액트 파이버 : 리액트에서 관리하는 평범한 자바스크립트 객체
- 파이버는 파이버 재조정자 (fiber reconciler)가 관리하는데, 가상 DOM과 실제 DOM을 비교해 변경사항을 수집하며, 둘 사이에 차이가 있으면 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청함.
- 재조정(reconciliation) : 리액트에서 어떤 부분을 새롭게 렌더링해야하는지, 가상 DOM과 실제 DOM을 비교하는 작업.
- 리액트 파이버의 목표 : 리액트에서 발생하는 애니메이션, 레이아웃, 그리고 사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하는 것.
- 작업을 작은 단위로 분할, 우선순위 매김
- 이러한 작업을 일시중지하고 나중에 다시 시작할 수 있음
- 이전에 했던 작업을 다시 재사용하거나 필요하지 않은 경우 폐기할 수 있음.
- 모든 과정은 비동기로 일어남
- 과거 리액트의 조정 알고리즘은 스택 알고리즘으로 이뤄져 있었다.
- 스택이 빌 때 까지 동기적으로 작업이 이루어지고 중간에 중단할 수 없었음 : 비효율적
- 사용자 인터랙션 + 동시 다발적 이벤트와 애니메이션을 위해 스택 조정자 대신 파이버라는 개념을 탄생시킴
- 파이버는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 이후에는 가급적 재사용됨
- 리액트가 파이버를 처리할 때마다 이러한 작업을 직접 바로 처리하기도하고 스케줄링하기도 함
리액트 파이버 트리
- 두 개가 존재함
- 현재 모습을 담음 : 파이버 트리
- 작업중인 상태 : workInProgress 트리
- 리액트 파이버의 작업이 끝나면 리액트는 단순히 포인터만 변경해 workInProgress 트리를 현재 트리로 바꿔버린다. (= 더블 버퍼링)
- 불완전한 트리르 보여주지 않기 위해 더블 버퍼링 기법을 쓰는데, 버퍼링을 위한 트리 두개가 존재하며 이는 커밋 단계에서 수행됨.
'FrontEnd > React' 카테고리의 다른 글
| 모던 리액트 Deep Dive - useState, useEffect (0) | 2024.07.03 |
|---|---|
| 모던 리액트 Deep Dive - 메모이제이션 (0) | 2024.07.01 |
| 모던 리액트 Deep Dive - 렌더링은 어떻게 일어나는가 (1) | 2024.06.30 |
| 모던 리액트 Deep Dive - 가상 DOM과 리액트 파이버 (2) (0) | 2024.06.25 |
| 모던 리액트 Deep Dive - JSX란 (0) | 2024.06.23 |
