React의 렌더링 흐름
React 컴포넌트는 아래의 흐름을 따라 렌더링된다.
- Render Trigger
- Rendering
- DOM Commit
- Painting
Render Trigger
수행 주체: react
컴포넌트 렌더링이 일어나는 데에는 두 가지 이유가 있다.
- 컴포넌트의 초기 렌더링인 경우
- 컴포넌트의 state가 업데이트된 경우 (+ props변경, useReducer 호출 등)
위와 같은 이유로 컴포넌트의 상태가 업데이트될 때, 렌더링 대기열(Rendering queues)에 추가된다.
(Components) Rendering - Render Tree 생성
수행 주체: react
Render Trigger 후 React는 컴포넌트를 호출하여 화면에 표시할 내용을 파악한다. "렌더링(Rendering)"은 React에서 컴포넌트를 호출하는 것을 말한다.
- 초기 렌더링에서 React는 루트 컴포넌트를 호출한다.
- 이후 렌더링에서 React는 state 업데이트가 일어나 렌더링을 트리거한 컴포넌트를 호출한다.
이 때, React는 render() 함수를 실행하여 새로운 가상 DOM(Virtual DOM)을 생성(JSX를 React 요소(React Element)로 변환)하고, 이전 가상 DOM과 새로운 가상 DOM을 비교(Diffing)해서 변경된 요소만 찾아 업데이트할 작업을 정리한다.
DOM Commit
수행 주체: react-dom
컴포넌트를 렌더링(호출)한 후 React는 (Real) DOM을 수정한다.
리렌더링 시, React는 필요한 최소한의 작업(렌더링 과정에서 계산된 것)을 적용하여 실제 DOM이 최신 렌더링 출력과 일치하도록 한다.
Painting
수행 주체: Browser
Browser Rendering이라고 하지만 (React 공식 문서에서) 혼동을 피하고자 "페인팅(Painting)"이라고 부른다.
브라우저가 변경된 DOM을 바탕으로 레이아웃 계산 (Reflow) 및 페인팅(Painting) 작업 수행한다.
참고: 렌더링 그리고 커밋 - React
https://ko.react.dev/learn/render-and-commit?utm_source=chatgpt.com
