렌더링 그리고 커밋

React 컴포넌트가 화면에 표시되는 과정은 다음의 3단계로 이루어집니다.

렌더링 트리거
React 컴포넌트 렌더링
DOM에 변경사항을 커밋

1. 렌더링 트리거

렌더링은 React에서 컴포넌트를 호출하는 것입니다. 이러한 렌더링은 다음 두 경우에서 트리거됩니다.

(1) 컴포넌트의 초기 렌더링인 경우

createRoot()에 화면에 보일 DOM 노드(루트 노드)를 인수로 넣어 호출 -> 객체에 할당
할당된 객체로 render() 메서드를 호출 -> 렌더링 트리거

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'))
root.render(<App />);

(2) 컴포넌트의 state가 업데이트된 경우

set 함수를 통해 state를 업데이트하여 추가적인 렌더링을 트리거합니다.
컴포넌트의 state를 업데이트하면 자동으로 렌더링 대기열에 추가됩니다.

2. React 컴포넌트 렌더링

렌더링을 트리거한 후, React는 컴포넌트를 호출하여 화면에 어떤 내용이 표시될지 확인합니다.

초기 렌더링의 경우
- React는 루트 컴포넌트를 호출합니다.
- React는 Virtual DOM 트리를 생성합니다.
state 업데이트로 렌더링 될 경우
- React는 업데이트가 일어난 컴포넌트를 호출합니다.
- 새로 Virtual DOM 트리를 구성하고, 이전 렌더링(이전 Virtual DOM)과 비교하여 변경된 속성을 계산합니다.

만약 업데이트된 컴포넌트가 다른 컴포넌트를 반환하면 그 컴포넌트도 이후에 렌더링됩니다. 중첩된 컴포넌트가 더 이상 없을 때까지 렌더링이 재귀적으로 계속됩니다.

2-1. 컴포넌트 렌더링의 규칙

컴포넌트 렌더링은 순수성이 존재하므로, 다음의 두 가지 규칙을 만족해야 합니다.

동일한 입력이 주어지면 항상 동일한 출력을 반환해야 한다.
이전 state를 변경하면 안된다. 즉, state는 불변성(immutability)을 유지해야 한다. -> 항상 새로운 상태 객체를 만들어 React에 전달한다.

Strict Mode를 이용하여 개발한다면 각 컴포넌트의 함수를 두 번 호출하므로, 순수하지 않은 함수로 인한 실수를 잡는 것에 도움이 됩니다.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Strick Mode 컴포넌트로 감싼 하위 컴포넌트들에 대해 모두 적용되기 때문에 일부분만 활성화할 수도 있습니다.

버그를 찾기 위해 순수 함수여야 하는 특정 함수들이 두 번 호출됩니다.
- 컴포넌트 함수, useState, set 함수, useMemo, useReducer에 전달한 함수
- constructor, render, shouldComponentUpdate 등
버그를 찾기 위해 effects를 두 번 실행합니다. -> 셋업 + 클린업 사이클을 실행합니다.
더 이상 사용되지 않는 API 사용 여부를 확인합니다.
개발 환경에서만 실행되며, 빌드에는 영향을 미치지 않습니다.

3. React가 DOM에 변경사항을 커밋

컴포넌트가 렌더링 된 이후에, React는 DOM을 수정합니다. 즉 변경 사항을 실제 DOM에 적용합니다.

초기 렌더링의 경우
- appendChild() DOM API를 사용 -> 생성한 모든 DOM 노드를 화면에 표시
리렌더링의 경우
- React는 렌더링하는 동안 계산된 작업을 적용하여 DOM이 최신 렌더링 출력과 일치하도록 만듬
- React는 렌더링 간에 차이가 있는 경우에만 DOM 노드를 변경

4. 브라우저 페인트(페인팅)

React가 DOM을 업데이트하면 브라우저는 화면을 다시 그립니다.

초기 렌더링의 경우
- 전체 브라우저 렌더링 과정 실행
리렌더링의 경우
- DOM 변경 사항에 따라 선택적으로 실행
- 레이아웃 변경 시 레이아웃 과정 재실행 => reflow
- 스타일 변경 시 페인트 과정 재실행 => repaint

🌐 브라우저 렌더링 과정
HTTP 문서를 파싱하여 문서 객체 모델(DOM 트리) 구축
CSS파일과 <style> 태그를 파싱하여 CSS 객체 모델(CSSOM 트리) 구축
DOM트리와 CSSOM트리를 결합하여 렌더 트리(Render Tree) 구축
브라우저 뷰포트 내에서 각 노드가 차지하는 크기와 위치 결정 -> 레이아웃(Layout)
각 노드를 화면에 그리는 페인팅(Painting)
여러 레이어로 구성된 요소를 합쳐 최종 페이지 뷰를 제공하는 합성(Compositing)