⚡ 14. React의 `useMemo`와 `useCallback` — 언제, 왜 써야 하는지 제대로 이해해보기

React 최적화 관련해서 항상 등장하는 두 가지,
useMemo와 useCallback.
하지만 실제로 제대로 활용하는 건 생각보다 까다롭다.
이번에 둘의 차이와 실제로 필요한 순간을 정리해봤다.

---

✅ useMemo

계산 비용이 높은 값을 메모이제이션(memoization) 해서,
렌더링마다 불필요한 계산을 막는다.

const expensiveValue = useMemo(() => {
  return complexCalculation(count);
}, [count]);

• count가 변할 때만 다시 계산됨
• 의존성 배열을 정확히 지정해야 함

---

✅ useCallback

함수를 메모이제이션해서,
자식 컴포넌트에 함수 props를 넘길 때 불필요한 리렌더링을 막는다.

const handleClick = useCallback(() => {
  console.log('버튼 클릭');
}, []);

• useMemo와 비슷하지만 "값"이 아니라 "함수"를 기억한다
• 주로 React.memo와 같이 쓸 때 효과적

---

✅ 정리 비교

항목	useMemo	useCallback
대상	계산 값	함수
주 목적	연산 최적화	props로 넘길 때 최적화
사용 예시	복잡한 계산 결과를 기억하고 싶을 때	컴포넌트에 함수 props 넘길 때

---

✅ 실제 예시: useCallback 없을 때 vs 있을 때

const Button = React.memo(({ onClick }: { onClick: () => void }) => {
  console.log('Button 렌더링');
  return <button onClick={onClick}>Click me</button>;
});

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

  // 매번 새로운 함수가 생성되므로 Button도 계속 리렌더링
  const handleClick = () => setCount((c) => c + 1);

  return <Button onClick={handleClick} />;
}

수정 (useCallback 사용):

const handleClick = useCallback(() => {
  setCount((c) => c + 1);
}, []);

• 이제 handleClick은 고정된 함수로 인식돼서 Button이 불필요하게 렌더링되지 않는다.

---

✅ 주의할 점

• 모든 계산/함수를 무조건 useMemo나 useCallback으로 감싸는 건 오히려 성능 악화
• 진짜 비용이 크거나, 진짜 리렌더링이 문제될 때만 써야 함
• 비용(Overhead) 대비 이득(Benefit)이 확실할 때 사용!

---

📝 내가 느낀 점

처음엔 무조건 최적화를 해야 좋은 줄 알았는데,
오히려 무분별한 useMemo, useCallback 사용이 코드를 복잡하게 하고 성능을 떨어뜨릴 수 있다는 걸 알게 됐다.
정말 필요한 곳에만, 신중하게 쓰는 게 최적화의 핵심이라는 걸 다시 느꼈다.

---

🧠 "최적화는 무기가 아니라, 상황에 따라 선택하는 도구다."