🧠 28. React 리렌더링 최적화 전략 정리 — 진짜 성능을 생각한다면 꼭 알아야 할 개념들

---

개발하면서 다음과 같은 로그를 본 적 있을 거다.

[컴포넌트A] 렌더링됨
[컴포넌트A] 렌더링됨
[컴포넌트A] 렌더링됨

🙄 “이거 왜 3번이나 렌더링 되지...?”

React는 기본적으로 상태나 props가 변경되면 컴포넌트가 다시 렌더링된다.
하지만 이게 꼭 "화면이 다시 그려진다"는 뜻은 아니고,
가상 DOM 비교 + 실제 DOM 변경은 React가 최적화해서 처리해준다.

그럼에도 불필요한 리렌더링은 성능 낭비이고,
실제로 프레임 드랍, 깜빡임, 리소스 낭비의 원인이 되기도 한다.

이번 글에서는
“불필요한 리렌더링을 막고 성능을 최적화하는 방법”을
구조적으로 정리해보자.

---

✅ 리렌더링이 발생하는 조건

1. 해당 컴포넌트의 state가 변경되었을 때
2. props가 변경되어 전달되었을 때
3. 부모 컴포넌트가 리렌더링되었을 때 (자식도 같이 됨)
4. context 값이 변경되었을 때 (구독 중인 컴포넌트 전체에 영향)

---

🔁 자주 보는 비효율 예시

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('Child 렌더링');
  return <div>memoized child</div>;
});

• props가 바뀌지 않으면 렌더링을 건너뛴다
• 얕은 비교(shallow equal)를 기준으로 판단

---

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

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

• props로 함수를 전달하는 경우, 매번 새 함수가 생성되는 걸 방지
• React.memo와 같이 쓸 때 특히 중요

---

3️⃣ useMemo로 계산 결과 캐싱

const expensiveValue = useMemo(() => calculateHeavy(data), [data]);

• 무거운 연산을 다시 실행하지 않게 캐시함
• 랜더링마다 값이 바뀌지 않도록 고정 유지

---

4️⃣ key 속성 관리

{list.map(item => (
  <Item key={item.id} {...item} />
))}

• 리스트 컴포넌트에서 key가 바뀌면 React는 새로 만들기 때문에 렌더링 비용 증가
• key 안정성 확보는 필수

---

5️⃣ 불필요한 props 전달 줄이기

<Child value1={value1} /> // ❌
<Child /> // ✅ 필요한 props만 전달

• props가 많아질수록 shallow compare가 오래 걸릴 수 있음
• 자식 컴포넌트에서 사용하지 않는 props는 전달하지 말 것

---

🧪 실전 디버깅 팁

• console.log('[컴포넌트] 렌더링')으로 추적
• React DevTools → Highlight updates 체크하면 어떤 컴포넌트가 리렌더링됐는지 색상으로 표시됨
• Profiler 탭으로 렌더링 시간과 빈도 확인 가능

---

📊 어떤 상황에서 어떤 최적화 기법이 좋을까?

상황	추천 전략
동일한 props로 계속 렌더링됨	React.memo
props로 함수 전달 시 리렌더링 발생	useCallback
무거운 계산이 자주 실행됨	useMemo
리스트 렌더링 최적화	key 관리 + memo
context 리렌더링 범위 줄이기	context 분할 or 별도 store 사용

---

📝 내가 느낀 점

처음엔 그냥 React.memo 하나로 해결되겠지 싶었는데,
실제로는 함수나 계산 결과가 바뀌는 것도 렌더링을 유발한다는 걸 나중에 깨달았다.

지금은 성능 민감한 페이지에선

• 구조부터 props 설계
• 필요한 곳만 memo
• 필요 없는 props는 아예 제거
  하는 방식으로 설계하고 있다.

---

⚡️ "불필요한 렌더링을 막는 건 최적화가 아니라, 설계의 결과다."

---