React는 props/state 변경 시 Virtual DOM을 비교(reconciliation)하고, 바뀐 부분만 commit해 실제 DOM에 반영한다.

🖥️ 렌더 단계

1. Render phase (pure, interruptible)
   • 컴포넌트 함수 실행 → 새 React Element 트리
   • Diff 알고리즘으로 변경점 계산 (Fiber)
2. Commit phase (sync)
   • DOM 업데이트
   • useLayoutEffect, ref
   • useEffect 스케줄

🔔 리렌더 트리거

• state 변경
• 부모 리렌더 (자식도 기본적으로 리렌더)
• Context value 변경 (구독 컴포넌트)
• useReducer dispatch (forceUpdate는 legacy)

💡 같이 알아둘 것

• 리렌더 ≠ DOM 업데이트. Diff 결과 변경 없으면 DOM은 건드리지 않는다.
• list key는 sibling identity다. index key는 reorder 때 깨지기 쉽다.
• React 18 Automatic Batching: setState 여러 번 → commit 한 번.

🔗 참고 자료

• Render and Commit — Render phase와 Commit phase의 역할을 설명한다.
• Keeping Components Pure — 렌더 함수가 순수해야 하는 이유를 설명한다.
• Understanding Your UI as a Tree — React Element 트리 구조를 설명한다.
• Queueing a Series of State Updates — Automatic Batching과 state 업데이트 큐잉을 설명한다.