[React] 리액트가 렌더링 하는 방식

React의 렌더링은 컴포넌트가 props와 state를 통해 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업이다. 그래서 크게 트리거, 렌더링 단계, 커밋 단계, 브라우저 페인팅 순으로 렌더링이 이루어진다.

---

1. 트리거 (Trigger)

렌더링 프로세스가 시작되는 단계이다. 리액트에서 트리거는 크게 두 가지 상황에서 발생한다.

• Initial Render: 애플리케이션이 처음 실행되어 컴포넌트가 마운트될 때.
• Re-render (State Update):
  • useState, useReducer 등의 상태($state$) 변경.
  • props의 변경.
  • 부모 컴포넌트의 리렌더링에 따른 자식 컴포넌트 전파.
  • Context 값의 변화.

---

2. 렌더링 단계 (Render Phase)

이 단계는 리액트가 "어떤 부분을 변경해야 하는지" 계산하는 과정이다. 브라우저의 화면(UI)에는 아직 아무런 변화가 나타나지 않는 순수 계산 단계이다.

1. 컴포넌트 호출: 업데이트가 필요한 컴포넌트를 호출하여 새로운 Virtual DOM(가상 DOM)을 생성한다.
2. 재조정(Reconciliation) 및 Diffing 알고리즘: 리액트의 효율적인 비교 알고리즘($O(n)$)을 통해 이전 렌더링 시점의 Virtual DOM 트리와 새로 생성된 Virtual DOM 트리의 속성이나 요소의 변경 사항을 식별하여 비교한다.

---

3. 커밋 단계 (Commit Phase)

렌더링 단계에서 계산된 변경 사항을 실제 브라우저 DOM에 반영하는 단계이다.

• DOM 업데이트: 리액트는 appendChild(), removeChild(), setAttribute() 등의 브라우저 API를 사용하여 최소한의 변경 사항만 실제 DOM에 주입한다.
• 동기적 실행: 사용자에게 불완전한 UI(부분적으로 업데이트된 화면)가 노출되지 않도록, 모든 DOM 조작을 하나의 트랜잭션처럼 동기적으로 한 번에 처리한다.

---

4. 브라우저 페인팅 (Browser Paint)

리액트의 커밋 단계가 완료되면, 브라우저 엔진이 변경된 DOM을 바탕으로 화면을 다시 그린다. 이 과정은 리액트의 통제 밖이며 브라우저의 렌더링 엔진(Reflow & Repaint)에 의해 수행된다.

---

📝 간단 요약