React에서 렌더링이란?

React에서 렌더링(rendering)은 화면을 직접 그리는 작업이 아니다. 현재의 props, state, context를 바탕으로 컴포넌트를 실행하고, 다음 UI를 나타내는 Fiber 트리를 계산하는 과정이다.

React 공식 문서는 업데이트가 화면에 반영되는 흐름을 다음 세 단계로 설명한다.

1. Trigger
2. Render
3. Commit

Commit이 끝나면 브라우저가 화면을 그린다.

Trigger → Render → Commit → Browser paint

Trigger

// 최초 렌더링을 요청한다.
root.render(<App />);

// 이후 렌더링을 요청한다.
setCount(count => count + 1);

Trigger는 React에 업데이트를 등록하고 렌더링을 요청하는 단계다. 이 시점에는 아직 컴포넌트가 실행되거나 DOM이 변경되지 않는다.

최초 렌더링은 root.render()가 Trigger하고, 이후 렌더링은 주로 state 업데이트가 Trigger한다. 여러 업데이트가 하나의 렌더링으로 배치될 수도 있으므로 Trigger와 Render가 항상 1:1로 대응하는 것은 아니다.

Render

Render phase에서는 다음 작업이 일어난다.

• props, state, context와 Hook 업데이트를 처리한다.
• 컴포넌트를 실행해 새로운 React element를 계산한다.
• 현재 commit된 Fiber 트리인 root.current를 기준으로 reconciliation을 수행한다.
• 기존 Fiber의 재사용, 생성, 삭제 여부를 결정하며 work-in-progress Fiber 트리를 만든다.
• useLayoutEffect와 useEffect의 effect 정보를 기록한다. 콜백은 이 단계에서 실행되지 않는다.

완성된 work-in-progress 트리는 finishedWork가 된다. Render phase는 우선순위가 높은 작업에 의해 중단되거나, 재시작되거나, 결과가 폐기될 수 있다. 따라서 컴포넌트의 render 로직은 순수해야 한다.

Commit

Commit phase에서는 Render phase에서 완성한 finishedWork를 실제 UI에 반영한다.

• 필요한 DOM 삽입, 수정, 삭제를 수행한다.
• root.current를 finishedWork로 교체한다.
• ref와 useLayoutEffect를 처리한다.

새 UI의 결과가 이전과 같다면 DOM mutation이 없을 수도 있다. 하지만 DOM이 변경되지 않았다고 해서 Render나 Commit이 발생하지 않은 것은 아니다.

Commit은 화면의 일관성을 유지하기 위해 Render phase처럼 중간에 중단하거나 결과를 폐기하지 않는다.

Browser paint

Commit 이후 브라우저는 style 계산, layout, paint, composite를 거쳐 화면에 픽셀을 그린다. Browser paint는 React의 렌더링이나 Commit이 아니라 브라우저가 수행하는 작업이다.

useLayoutEffect는 브라우저가 paint하기 전에 실행되므로, 내부 작업이 오래 걸리면 화면 표시를 지연시킬 수 있다.

Passive effect

useEffect는 commit된 트리에 대해서만 실행되는 passive effect다. 일반적으로 브라우저 paint 이후 실행되지만, 업데이트가 발생한 상황에 따라 paint 이전에 처리될 수도 있으므로 “항상 paint 이후”라고 단정해서는 안 된다.

핵심: Trigger ≠ Render ≠ Commit ≠ DOM mutation ≠ Browser paint

React에서 렌더링이란, 현재 입력을 바탕으로 다음 UI를 나타내는 work-in-progress Fiber 트리를 계산하는 과정이다. 렌더링 자체는 실제 DOM 변경이나 브라우저 paint를 의미하지 않는다.

참고

• Render and Commit – React 공식 문서