🔁 20. React의 리렌더링 흐름 정리 — 언제, 왜, 얼마나 렌더링 되는 걸까?

리액트를 쓰다 보면 왜 이 컴포넌트가 또 렌더링되지?라는 생각을 하게 된다.
이번 글은 React의 리렌더링 흐름을 구조적으로 이해하고,
실제로 성능 최적화를 위해 어떤 전략을 사용할 수 있는지까지 정리해봤다.

---

🧠 기본 개념 먼저 잡자

React는 상태(state)나 props가 바뀌면
해당 컴포넌트와 그 자식 컴포넌트 전체가 다시 렌더링된다.

✅ 단, "렌더링(Render)" = 다시 화면에 그리는 건 아님
→ 실제 DOM 업데이트는 React가 Virtual DOM을 통해 효율적으로 처리함 (diff 알고리즘)

---

✅ 어떤 상황에서 리렌더링이 발생할까?

상황	리렌더링 발생 여부
useState로 상태 변경	✅ 발생
부모 컴포넌트가 리렌더링됨	✅ 자식도 발생
props가 변경됨	✅ 발생
context 값 변경됨	✅ 관련 컴포넌트 리렌더링
동일한 값으로 setState 호출	❌ (React가 무시함)
useRef 값 변경	❌ (렌더링 안됨)

---

🔍 실제 코드 흐름 예시

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

  return (
    <>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <Child />
    </>
  );
}

function Child() {
  console.log('Child 렌더링');
  return <div>자식 컴포넌트</div>;
}

결과는?

👉 버튼 클릭할 때마다 Child도 함께 렌더링됨
왜냐하면 Parent가 리렌더링 → 하위 컴포넌트들도 함께 렌더링되기 때문

---

🧩 불필요한 리렌더링을 막는 방법

1️⃣ React.memo 사용

const Child = React.memo(() => {
  console.log('렌더링 방지됨');
  return <div>memoized</div>;
});

• props가 바뀌지 않으면 렌더링을 막아줌
• shallow compare로 비교됨

2️⃣ useCallback으로 함수 메모이징

const handleClick = useCallback(() => {
  // 로직
}, []);

• React.memo된 컴포넌트에 props로 함수를 넘길 땐 필수
• 새 함수가 생성되지 않도록 막아줌

3️⃣ useMemo로 연산 메모이징

const value = useMemo(() => expensiveCalc(num), [num]);

• 리렌더링마다 다시 계산하지 않도록 방지

---

✨ 컴포넌트 렌더링 흐름 요약

[상태 변경 or props 변경]
        ↓
  컴포넌트 함수 실행됨 (렌더링)
        ↓
  JSX 반환 → Virtual DOM 생성
        ↓
  이전 VDOM과 비교(diff)
        ↓
  실제 필요한 부분만 DOM 업데이트

---

🧪 디버깅 팁

• console.log('렌더링')으로 직접 확인
• React Developer Tools → 컴포넌트별 렌더링 확인 가능
• <React.StrictMode>를 활용해 개발 중 리렌더링 탐지

---

📝 내가 느낀 점

처음엔 "setState하면 다시 그려지지" 정도로 생각했는데,
실제로는 Virtual DOM diff, 리렌더링과 DOM 업데이트는 다른 개념이라는 걸 깨달았다.
그리고 성능 최적화란 건 결국,
불필요한 리렌더링을 어떻게 줄일 수 있느냐의 문제라는 것도 느꼈다.

지금은 React.memo, useCallback, useMemo를
"최적화용 기본 세트"처럼 쓰게 됐다!

---

💡 "React는 똑똑하지만, 불필요한 렌더링을 막는 건 개발자의 몫이다."