React의 useMemo는 성능 최적화보다 의도 전달이 먼저다

useMemo를 처음 배울 때는 성능 최적화 도구로 배운다. 연산 비용이 높은 함수를 메모이제이션해서 렌더링 횟수를 줄인다는 식이다. 하지만 실제로는 다르다.

useMemo의 진짜 목적

React의 렌더링 성능은 이미 충분히 빠르다. 대부분의 경우 useMemo는 성능을 크게 개선하지 못한다. 오히려 불필요한 메모이제이션으로 인해 코드가 복잡해질 수 있다.

그럼 왜 useMemo를 쓸까? 의도를 명확히 하기 위해서다.

// ❌ 의도가 불명확함
const filteredList = list.filter(item => item.active);

// ✅ 의도가 명확함
const filteredList = useMemo(
  () => list.filter(item => item.active),
  [list]
);
// "이 계산 결과는 list가 바뀔 때만 다시 계산된다"는 의도를 표현

상태 관리와 렌더링의 관계 이해하기

useMemo를 사용하기 전에, 먼저 상태가 어떻게 흐르는지 파악해야 한다.

• 어떤 상태가 바뀌면 리렌더링이 되는가
• 이 컴포넌트가 얼마나 자주 리렌더링되는가
• 리렌더링 중에 무엇이 다시 계산되는가

이걸 파악해야 useMemo가 필요한지 판단할 수 있다.

이벤트 흐름 추적하기

실제로 성능 문제가 있는지 확인하려면 개발자 도구를 사용한다.

# React DevTools에서 Profiler를 켠다
# 각 컴포넌트의 렌더링 횟수와 소요 시간을 확인한다

useMemo를 쓸 때의 체크리스트

• 이 계산이 정말 비용이 높은가? (실제 측정해봤는가?)
• 이 값이 자주 바뀌는가? (자주 바뀌면 메모이제이션의 효과가 낮다)
• 이 메모이제이션 자체가 성능을 깎지 않는가? (메모이제이션도 비용이다)
• 코드의 의도가 더 명확해지는가?

useMemo의 핵심은 성능이 아니라 명확성이다. "이 값은 렌더링마다 새로 계산되지 않는다"는 의도를 다른 개발자에게 전달하는 것이 주목적이다. 성능 개선은 그 다음이다.