useMemo와 useCallback은 언제 사용해야 하며, 어떤 문제를 해결하나요?

Question

Accepted Answer

둘 다 render 사이에 무언가를 캐시하여 매번 재계산/재생성되지 않도록 합니다:
- **`useMemo`**는 **계산된 값**을 캐시합니다.
- **`useCallback`**은 **함수의 identity**를 캐시합니다(이는 `useMemo(() => fn, deps)`와 같습니다).

이들은 (a) 비용이 큰 작업의 반복을 피하고 (b) memo된 자식이 의존하는 참조 동일성이 깨지는 것을 방지하기 위해 존재합니다.

```jsx
function Table({ rows, onSelect }) {
  // (a) 비용이 큰 계산 — `rows`가 변경될 때만 재계산
  const sorted = useMemo(() => rows.slice().sort(byName), [rows]);

// (b) 안정적인 함수 identity — React.memo 자식이 re-render되지 않고,
  //     이에 의존하는 effect가 다시 실행되지 않도록 함
  const handleSelect = useCallback(id => onSelect(id), [onSelect]);

return <Grid rows={sorted} onSelect={handleSelect} />;
}
```

## 왜 참조 안정성이 중요한가

`useCallback`이 없으면 `handleSelect`는 매 render마다 완전히 새로운 함수가 됩니다. `React.memo(Grid)`는 "새로운" prop을 보고 어쨌든 re-render하여 memoization을 무력화합니다. memo된 자식에게 전달되거나 `useEffect` 의존성 배열에 사용되는 객체도 마찬가지입니다.

## 트레이드오프 — 남용하지 마세요

```jsx
const x = useMemo(() => a + b, [a, b]); // ❌ 무의미함 — 덧셈이 memoize보다 저렴함
```

- memoization은 공짜가 아닙니다: 메모리와 함께 **매** render마다 의존성 비교 비용이 듭니다.
- 잘못되거나 누락된 의존성 배열은 **오래된 값(stale value)**을 발생시킵니다 — 가장 흔한 버그입니다.
- 실제 문제를 측정했을 때만(비용이 큰 계산, 또는 너무 자주 re-render되는 memo된 자식) memoize하세요. 모든 곳에 성급하게 `useMemo`/`useCallback`을 사용하면 노이즈가 늘고 오히려 더 느려질 수도 있습니다. (React 19의 컴파일러는 자동으로 memoize할 수 있어 그 필요성을 줄여줍니다.)