1. DOM과 브라우저 렌더링 과정
가상 DOM을 알아보기에 앞서 DOM(Document Object Model)이란 무엇인지 먼저 살펴보자.
DOM은 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.
브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.
브라우저가 사용자가 요청한 주소를 방문해 HTML 파일을 요청한다.
브라우저의 렌더링 엔진이 HTML을 파싱해 DOM 트리를 만든다.
2번 과정에서 CSS 파일을 만날 경우 CSS 파일도 요청한다.
렌더링 엔진은 CSS도 파싱해 CSS 노드로 구성된 트리 CSSOM을 만든다.
브라우저는 2번에서 만든 DOM 노드를 순회하는데, 사용자 눈에 보이는 노드만 방문한다. 즉, display: none과 같은 요소는 방문하지 않는다.
눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 스타일을 적용한다. 노드에 CSS를 적용하는 과정은 크게 2가지로 나뉜다.
레이아웃(layout, reflow): 각 노드가 브라우저 화면에 정확히 어느 좌표에 나타나야 하는지 계산하는 과정 레이아웃 과정 이후에는 반드시 페인팅 과정을 거친다
페인팅(painting): 레이아웃 단계를 거친 후 색과 같은 실제 유효한 모습을 그리는 과정
<React의 렌더링 과정>
상태 변경:
사용자 입력이나 다른 이벤트로 인해 컴포넌트의 상태가 변경된다.
리렌더링 시작:
React는 변경된 컴포넌트와 그 자식 컴포넌트들의 리렌더링을 시작한다.
가상 DOM 업데이트:
새로운 가상 DOM 트리가 생성된다.
파이버 알고리즘 적용:
파이버 알고리즘이 이 과정을 관리하며, 필요에 따라 작업을 일시 중지하거나 우선순위를 조정한다. (비동기적)
비교 (Diffing):
새로운 가상 DOM과 이전 가상 DOM을 비교하여 차이점을 찾는다.
변경사항 계산:
실제 DOM에 적용해야 할 최소한의 변경사항을 계산한다.
DOM 업데이트:
계산된 변경사항만 실제 DOM에 적용한다.
UI 반영:
브라우저가 변경된 DOM을 화면에 렌더링하여 사용자에게 보여준다.
이 과정을 통해 React는 효율적으로 UI를 업데이트하며, 불필요한 DOM 조작을 최소화한다. 파이버 알고리즘은 이 과정을 더욱 최적화하여, 대규모 애플리케이션에서도 부드러운 사용자 경험을 제공할 수 있게 한다.
