⚡️ React Reconciliation: The Hidden Engine Behind Your Components

원문: React Reconciliation: Deep Dive

🔧 React Reconciliation이란?

React의 Reconciliation(조정)은 컴포넌트 트리의 변경 사항을 실제 DOM에 최소한의 비용으로 반영하기 위해 실행되는 내부 알고리즘이다.

이 과정 덕분에 React는 선언형으로 UI를 작성하더라도 실제 DOM 조작을 최적화할 수 있다.

🧩 Component Identity and State Persistence (컴포넌트 ID 및 상태 지속성)

✅ React는 컴포넌트의 정체성을 어떻게 판단할까?

React는 컴포넌트를 재사용할지, 새로 만들지를 아래 두 가지 기준으로 판단한다:

  1. **타입(type)**이 같은가?

    예: <input /> vs <div />는 다르지만 <input /> vs <input />은 같음

  2. **트리 내 위치(position)**가 같은가?

    컴포넌트의 렌더링 순서나 구조가 바뀌지 않아야 동일하다고 본다.

이 두 조건이 모두 만족되면 React는 **"같은 컴포넌트"**로 판단하고, 기존 상태(useState, useRef 등)를 유지한다.

❗ 예시: 상태 유지가 되는 경우

function App() {
  const [edit, setEdit] = useState(false);

  return (
    <>
      <button onClick={() => setEdit(!edit)}>Toggle</button>
      {edit ? (
        <input placeholder="Edit mode" />
      ) : (
        <input placeholder="View mode" disabled />
      )}
    </>
  );
}