React 렌더링의 두 단계: render phase와 commit phase
React가 화면을 그릴 때는 단순히 한 번에 모든 걸 처리하지 않는다.
렌더링 과정은 두 단계로 나뉘며, 이 구조 덕분에 React는 빠르고 유연하게 동작한다.
바로 render phase와 commit phase이다.
🧩 Render Phase: 변화된 UI를 “계산”하는 단계
먼저 render phase는 “무엇이 바뀌었는가?” 를 판단하는 과정이다.
이 단계에서는 실제로 화면(DOM)에 아무 일도 일어나지 않는다.
React는 내부적으로 가상 DOM(Virtual DOM) 을 사용해 변경 사항을 계산하고,
이전 상태와 비교하여 어떤 부분을 업데이트해야 하는지를 찾아낸다.
쉽게 말하면,
“React가 머릿속으로 화면을 다시 그려보는 시간” 이라고 볼 수 있다.
이때 중요한 특징은 중단 가능성(interruptibility) 이다.
render phase는 단순히 계산만 하는 단계이기 때문에, React 18의 Concurrent Mode에서는 이 과정을 잠시 멈추거나 다시 시작할 수 있다.
예를 들어, 사용자가 스크롤하거나 버튼을 누르는 등 더 급한 작업(고우선순위) 이 발생하면, React는 렌더 계산을 잠시 멈추고 먼저 그 작업을 처리한다.
이 구조 덕분에 앱이 버벅이지 않고 매끄럽게 반응할 수 있다.
💡 핵심 포인트
Render Phase = “무엇이 바뀌었는가?”를 계산하는 단계 (DOM 변경 X)
🧩 Commit Phase: 계산 결과를 “적용”하는 단계
commit phase는 이제 React가 실제로 화면을 업데이트하는 단계이다.
render phase에서 계산된 결과를 토대로 React는 브라우저의 실제 DOM을 수정하고, 화면에 새로운 UI를 보여준다.
이 과정이 끝나면 useEffect, componentDidMount 같은 사이드 이펙트 훅이 실행된다.
즉, 이 단계부터 사용자가 눈으로 볼 수 있는 변화가 생긴다.
💡 핵심 요약 Commit Phase = “계산된 결과를 실제 DOM에 반영하는 단계”
Render와 Commit은 언제나 함께일까?
많은 사람들이 “렌더링”을 한 번의 과정으로 생각하지만, React는 render와 commit을 서로 다른 타이밍에 수행할 수 있다.
이 두 단계가 즉시 이어지지 않을 수도 있다는 점이 중요하다.
1️⃣ 단계적 진행 (Stepwise Execution)
render phase가 끝나도 React는 바로 commit을 하지 않을 수 있다.
사용자 입력 등 더 중요한 작업이 대기 중이라면 그걸 먼저 처리한 뒤, 나중에 DOM 업데이트를 이어간다.
이 덕분에 화면이 멈춘 것처럼 느껴지지 않고, 부드러운 사용자 경험(UX) 을 제공할 수 있다.
2️⃣ 일관성 유지 (Consistency Handling)
React는 모든 변경 사항이 완전히 준비된 상태에서만 commit을 실행한다.
즉, 중간 계산 도중에는 화면을 바꾸지 않는다.
이로써 UI의 일관성이 유지되고, 불필요한 깜빡임이나 재렌더링이 방지된다.
🎯 정리
| 구분 | 역할 | DOM 변경 | 특징 |
|---|---|---|---|
| Render Phase | 변경될 UI를 계산 | ❌ | 중단 가능, 비동기적 계산 |
| Commit Phase | 계산된 결과를 DOM에 반영 | ✅ | 사이드 이펙트 발생, 일관된 렌더링 |
React는 이렇게 두 단계를 분리함으로써 UI를 더 효율적이고 예측 가능하게 만든다.
render phase는 “무엇이 바뀔지”를 판단하고,
commit phase는 “그 결과를 실제로 적용”하는 역할을 수행하죠.
💬 결론적으로,
Render Phase는 계산이고, Commit Phase는 실행이다.
이 두 단계가 분리되어 있기 때문에 React는 복잡한 애플리케이션에서도 안정적이고 부드러운 렌더링을 제공할 수 있다.