React에서의 렌더링 과정은 단순히 setState() → 재렌더링이 일어나는 것처럼 보이지만,
내부적으로는 두 가지 단계인 Render Phase와 Commit Phase를 거친다.
각 단계는 역할이 명확히 다르고, 특히 React 18의 Concurrent Mode에서는 이 구조가 더욱 중요해진다.
1. Render Phase (렌더 단계)
UI 변경 사항을 계산하는 단계
- 변경된 상태(state)나 props를 기반으로, 어떤 UI를 그려야 하는지를 계산
- 실제 DOM에는 아무런 변경이 발생하지 않음
- 가상 DOM(Virtual DOM)을 기반으로 변화 예측
- React의 Fiber Tree 구조에 따라 새로운 트리를 생성
특징
- 순수 계산 단계이므로 중단되거나 다시 시작 가능
- 비동기적으로 실행 가능 (→ Concurrent Mode에서 특히 유용)
- useEffect, ref, DOM 조작은 이 시점에 발생하지 않음
2. Commit Phase (커밋 단계)
실제 DOM에 변경 사항을 적용하는 단계
- Render Phase에서 결정된 변경 사항을 실제 DOM에 반영
- UI가 시각적으로 업데이트됨
- DOM 업데이트 이후,
useEffect,useLayoutEffect등의 사이드이펙트 실행
특징
- 이 단계는 중단되지 않고 반드시 완료되어야 함
- 빠르게 실행되어야 하며, UI에 직접 영향을 줌
요약: Render vs Commit
| 구분 | Render Phase | Commit Phase |
|---|---|---|
| 역할 | 변경 사항 계산 (Virtual DOM) | 실제 DOM 반영 |
| DOM 변경 | ❌ 없음 | ✅ 있음 |
| 중단 가능 여부 | ✅ 중단 및 재시작 가능 | ❌ 불가 |
| React Hook 실행 | useMemo, useCallback, render 내부만 | useEffect, useLayoutEffect, ref 처리 |
| 처리 방식 | 비동기 가능 (Concurrent Mode) | 반드시 동기 처리 |
동기화될 때의 특징
1. 단계적 진행 (Prioritization)
render phase가 끝났더라도 React는 즉시 커밋하지 않을 수 있음- 우선순위가 높은 작업이 있다면 먼저 처리
- 이후
commit phase를 안전하게 실행 → 사용자 경험 최적화
2. 일관성 있는 병목 처리
- 변경된 내용을 모두 Fiber Tree에 먼저 준비한 후
commit하므로, - DOM의 일관성 유지가 가능하고, 불필요한 중간 렌더링이 없음
마무리
- Render Phase는 "계산", Commit Phase는 "실행"이다
- React의 렌더링은 실제 DOM에 바로 영향을 주지 않음 → 성능 최적화 가능
- React 18 이상에서는 이 구조가 더욱 중요해짐 (비동기 작업 관리 등)
다음에는 Concurrent Mode, Fiber Tree, Reconciliation, Effect Cleanup 등의 심화 주제도 정리해보자!
개발 공부 블로그