React의 reconciliation 과정에 대해 설명해 주세요. React가 어떤 방식으로 DOM 업데이트를 최소화하는지 알고 계신가요

“하루에 하나씩 FE 면접 문제 5월 4일입니다.”

🔷 React Reconciliation이란?#

Reconciliation은 컴포넌트의 상태(state)나 props가 변경되었을 때, React가 이전 Virtual DOM과 새로운 Virtual DOM을 비교(diff)하여 최소한의 실제 DOM 변경을 수행하는 과정입니다.

React는 두 개의 Virtual DOM을 비교하며 효율적인 diffing을 합니다. 이 때 다음과 같은 가정을 통해 성능을 높입니다:

<div> → <div>      ✅ OK (속성 비교만)
<div> → <span>     ❌ 완전히 새로 교체

<ul>
  <li key="a">A</li>
  <li key="b">B</li>
</ul>

→ 만약 순서만 바뀌면 key를 통해 React는 실제 DOM을 건드리지 않고 가상 노드만 교환합니다.

return (
  <div>
    <h1>Hello</h1>
    <p>{this.state.text}</p>
  </div>
)

this.state.text가 바뀌면,
- React는 이전 Virtual DOM과 비교하여 <p> 태그만 다시 그리면 된다는 걸 알아냄
- <h1>이나 <div>는 건드리지 않음 → 최소 DOM 조작

단계	설명
1. 상태 변경	상태(state)나 props가 바뀌면 render 호출
2. Virtual DOM 생성	새로운 Virtual DOM 트리 생성
3. Diff 알고리즘	이전과 비교하여 변경점 계산
4. 최소 DOM 업데이트	실제 DOM에 최소한의 변경 수행