📌 React의 렌더링 프로세스
- React는 2단계를 거쳐 화면에 UI를 렌더링합니다.
- Render Phase : 컴포넌트를 계산하고 업데이트 사항을 파악하는 단계
- Commit Phase : 변경사항을 실제 DOM에 반영하는 단계
✅ Render Phase
1. 컴포넌트를 호출해 결과값을 계산
컴포넌트를 호출하면 React Element라는 객체가 반환됩니다.
이 객체는 컴포넌트가 렌더링하고자 하는 UI에 대한 모든 정보를 담고 있는 구조입니다.
Render Phase에서는 리액트 컴포넌트를 호출해, 결과값으로 React Element 객체를 생성하게 됩니다.
2. React Element들을 모아 Virtual DOM 생성
화면에 렌더링되어야 하는 모든 컴포넌트를 호출해 얻은 React Element 객체들을 모아, Virtual DOM 트리 형태로 구조화합니다.
💡 Virtual DOM이란?
Virtual DOM은 React Element 객체들의 모음으로, 실제 DOM은 아닙니다.
단지 값으로 표현된 UI 구조일 뿐이며, 렌더링 결과를 메모리 상에서 표현한 일종의 가상 트리입니다.
Render Phase 정리
Render Phase는 컴포넌트를 호출해 React Element 객체를 만들고, 이를 모아 Virtual DOM 트리로 구성하는 과정입니다. 이 단계에서는 실제 DOM 변경은 발생하지 않습니다.
✅ Commit Phase
1. Virtual DOM을 Actual DOM에 반영
렌더 페이즈에서 계산된 Virtual DOM을 바탕으로, React는 실제 DOM(Actual DOM)에 변경 사항을 반영합니다.
Virtual DOM과 이전 상태를 비교(diffing)한 후, 변경이 필요한 부분만 실제 DOM에 업데이트하게 되고, 이로 인해 브라우저는 DOM 변경을 감지합니다.
그 결과, 렌더 트리 재생성 → 레이아웃 계산 → 페인팅 등의 과정이 순차적으로 이루어지며, 화면이 최종적으로 업데이트됩니다.
❓ 업데이트가 발생하면 어떤 일이 일어날까?
1. Rener Phase를 처음부터 다시 실행 → 새로운 Virtual DOM 생성
업데이트가 발생하면, React는 Render Phase를 다시 실행 합니다.
변경된 상태나 props를 반영해 컴포넌트를 다시 호출하고, 그 결과로 새로운 React Element들을 생성하여 Virtual DOM 트리를 다시 구성합니다.
2. Next Virtual DOM ↔ Prev Virtual DOM의 차이점 비교
React는 Render Phase에서 새롭게 생성된 Next Virtual DOM과 이전에 렌더링했던 Prev Virtual DOM을 비교합니다.
이 과정을 Diffing이라고 하며, 두 Virtual DOM 사이의 차이점을 찾아냅니다.
이렇게 달라진 부분만 선별함으로써, 이후 불필요한 DOM 조작 없이 필요한 부분만 실제 DOM에 반영할 수 있게 됩니다.
3. 계산된 차이점을 Actual DOM에 한번에 업데이트
Diffing 과정을 통해 변경된 부분이 파악되면, React는 해당 변경 사항만 Actual DOM에 반영합니다.
이 단계가 바로 Commit Phase로, 브라우저의 실제 화면이 바뀌는 시점입니다.
실제 DOM이 변경되면 브라우저는 이를 감지하고, 렌더 트리를 다시 구성하고 레이아웃 계산 → 페인팅 → 화면 업데이트 순으로 진행됩니다.
💡 Reconciliation
React는 동시에 발생한 여러 업데이트를 한 번에 처리합니다.
이때 새로 생성된 Next Virtual DOM과 기존의 Prev Virtual DOM을 비교(Diffing)하여 변경된 부분만 실제 DOM에 반영합니다.
이처럼 여러 변화를 모아 최소한의 DOM 변경으로 효율적으로 업데이트하는 과정을 React에서는 Reconciliation(재조정)이라고 부릅니다.
이 덕분에 대부분의 상황에서 빠른 렌더링 성능을 유지할 수 있습니다.
출처
