React의 "재렌더링(Re-rendering)"과 "재조정(Reconciliation)" 개념 정리

✅ React의 "재렌더링(Re-rendering)"과 "재조정(Reconciliation)" 개념 정리

React의 렌더링 과정은 크게 두 가지 단계로 나뉘어:
1️⃣ 재렌더링(Re-rendering): 컴포넌트가 다시 실행됨 (JSX 재계산).
2️⃣ 재조정(Reconciliation): Virtual DOM을 비교하여 바뀐 부분만 실제 DOM에 반영.

💡 즉, "재렌더링"이 일어나더라도, "재조정"을 통해 실제 DOM 업데이트는 최소화됨!
👉 React는 필요한 부분만 업데이트해서 성능을 최적화하는 게 핵심이야.

---

✅ 1. 재렌더링 (Re-rendering)

📌 재렌더링이란?

• 컴포넌트의 return 구문이 다시 실행되는 과정을 의미해.
• JSX가 다시 계산되지만, 실제 DOM 업데이트는 아직 일어나지 않음.

📌 언제 재렌더링이 발생할까?
✔️ useState()의 setState()를 호출할 때
✔️ 부모 컴포넌트가 리렌더링될 때 (자식도 영향을 받을 수 있음)
✔️ useContext() 값이 변경될 때
✔️ useReducer() 상태가 변경될 때
✔️ props가 변경될 때

📌 예제 (재렌더링 발생)

function App() {
  const [count, setCount] = useState(0);

  console.log("🚀 App 렌더링됨!");  // 재렌더링될 때마다 실행됨

  return (
    <div>
      <h1>카운트: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

🟢 "+" 버튼 클릭 시 흐름
1️⃣ setCount(count + 1) 실행 → count 값 변경
2️⃣ React는 App을 재렌더링 (JSX를 다시 계산)
3️⃣ 재조정(Reconciliation) 실행 (Virtual DOM 비교)
4️⃣ 변경된 부분 (<h1>카운트: {count}</h1>)만 실제 DOM 업데이트!

💡 즉, return 구문이 다시 실행되지만, 실제로 DOM을 전부 다시 그리지는 않아!

---

✅ 2. 재조정 (Reconciliation)

📌 재조정이란?

• Virtual DOM을 비교(diffing)하여 변경된 부분만 실제 DOM에 반영하는 과정이야.
• React Fiber라는 알고리즘이 이를 최적화해서 빠르게 처리해.

📌 재조정이 일어나는 기준
✔️ 이전 Virtual DOM과 새로운 Virtual DOM을 비교(diffing)
✔️ 바뀐 요소만 찾아서 업데이트 (최소한의 변경만 반영)
✔️ 같은 컴포넌트 구조면 그대로 유지하고, 다르면 새로 생성

📌 예제 (재조정 과정)

function App() {
  const [text, setText] = useState("Hello");

  return (
    <div>
      <h1>{text}</h1>  {/* 🔄 이 부분만 바뀌면, 여기만 업데이트됨 */}
      <button onClick={() => setText("React")}>변경</button>
    </div>
  );
}

🟢 버튼 클릭 시 흐름
1️⃣ setText("React") 실행 → text 값 변경
2️⃣ return 구문이 다시 실행됨 (재렌더링)
3️⃣ Virtual DOM 비교 → <h1>{text}</h1> 부분만 변경됨을 감지
4️⃣ 이 부분만 실제 DOM 업데이트!

• <h1>Hello</h1> → <h1>React</h1> 로 변경됨
• <button>은 그대로 유지 (재조정 덕분에 성능 최적화됨!)

💡 즉, JSX를 다시 계산하지만, 실제로 변경된 부분만 브라우저 DOM에 반영돼!

---

✅ 3. 재렌더링 vs 재조정 비교 정리

구분	재렌더링 (Re-rendering)	재조정 (Reconciliation)
의미	컴포넌트의 return 구문이 다시 실행됨	Virtual DOM을 비교하여 변경된 부분만 실제 DOM 업데이트
발생 조건	state, props 변경, 부모 렌더링	Virtual DOM과 이전 상태 비교 후 변경 감지
DOM 업데이트 여부	JSX는 다시 계산되지만, 실제 DOM 변경 X	변경된 부분만 실제 DOM 업데이트
최적화 필요성	불필요한 렌더링을 줄이는 것이 중요	변경된 부분만 업데이트하여 성능 최적화

---

✅ 4. React 성능 최적화 (불필요한 재렌더링 방지하기)

📌 React에서 불필요한 재렌더링을 막으려면?
✔️ React.memo() → props가 변하지 않으면 리렌더링 방지
✔️ useMemo(), useCallback() → 함수나 값이 불필요하게 다시 계산되는 것 방지
✔️ key 속성 최적화 → 리스트 렌더링 시 변경 감지 최적화
✔️ useState()를 최소화 → 불필요한 상태 변경을 줄이기

📌 예제: React.memo() 사용

const Child = React.memo(({ value }) => {
  console.log("Child 렌더링됨!");  // 값이 변할 때만 실행됨
  return <p>값: {value}</p>;
});

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Child value="변경되지 않는 값" />  {/* ✅ 불필요한 재렌더링 방지됨 */}
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

🟢 "변경되지 않는 값"은 변하지 않으므로 <Child>가 다시 렌더링되지 않음!
👉 불필요한 재렌더링 방지 & 성능 최적화 🚀

---

✅ 최종 요약 (반복 학습용)

✔️ 재렌더링: return 구문이 다시 실행되는 것 (하지만 실제 DOM 변경은 아직 없음).
✔️ 재조정: Virtual DOM을 비교(diffing)하여 변경된 부분만 실제 DOM에 반영하는 것.
✔️ React는 "렌더링을 최소화"하고, "필요한 부분만 업데이트"하는 방식으로 최적화함!
✔️ 최적화 방법: React.memo(), useMemo(), useCallback()을 활용하여 불필요한 렌더링 방지.

---

이제 재렌더링과 재조정이 확실히 정리됐을 거야! 🚀
더 궁금한 점 있으면 언제든 질문해줘! 😊