React에서 useMemo와 useCallback은 언제 사용해야 하나요?

useMemo는 비용이 큰 계산 결과를 의존성이 바뀔 때만 다시 계산하고, useCallback은 함수 참조를 의존성이 바뀔 때만 새로 만듭니다. 둘 다 성능 최적화 도구이며, 모든 값과 함수에 습관적으로 붙이면 오히려 코드 복잡도와 메모리 비용이 늘 수 있습니다.

핵심 개념

핵심 기준은 메모이제이션이 실제 병목을 줄이는지 판단입니다. 이 개념은 단순히 용어를 외우는 것보다, 어떤 문제를 줄이기 위해 등장했는지와 실제 코드나 운영 환경에서 어떤 trade-off를 만드는지 함께 이해하는 것이 중요합니다.

값의 재계산 비용과 함수 참조 안정성이 실제 렌더링에 영향을 주는지 기준으로 생각해보세요.

동작 흐름

1. 먼저 문제가 발생하는 조건과 입력을 확인합니다.
2. 관련된 런타임, 브라우저, 서버, 데이터 저장소의 책임을 나눠 봅니다.
3. 가장 작은 범위에서 안전한 해결책을 적용합니다.
4. 로그, 테스트, 모니터링으로 실제로 문제가 줄었는지 확인합니다.

실제 예시

긴 목록 필터링 결과를 useMemo로 캐싱하거나, memo로 감싼 자식 컴포넌트에 전달하는 이벤트 핸들러를 useCallback으로 안정화할 수 있습니다.

실무에서 적용하는 방법

먼저 React DevTools Profiler로 불필요한 렌더링이나 계산 비용을 확인한 뒤 적용합니다.

실무에서 주의할 점

• 의존성 배열이 잘못되면 오래된 값이나 stale closure 문제가 생길 수 있습니다.
• 간단한 계산이나 자주 바뀌는 의존성에는 효과가 거의 없을 수 있습니다.
• 개념을 적용하기 전에 현재 시스템의 규모, 병목, 장애 영향도를 함께 확인해야 합니다.
• 팀 규칙이나 프레임워크 기본 동작과 충돌하지 않는지도 점검하는 것이 좋습니다.

함께 연결해서 보면 좋은 키워드

React, 렌더링, 성능, Hook

면접에서 짚으면 좋은 포인트

• 정의만 말하기보다 어떤 문제를 줄이기 위한 개념인지 먼저 설명하면 좋습니다.
• 장점과 함께 비용, 한계, 적용하지 않아도 되는 상황을 같이 말하면 실무 이해도가 드러납니다.

정리

한 줄로 정리하면, useMemo는 비용이 큰 계산 결과를 의존성이 바뀔 때만 다시 계산하고, useCallback은 함수 참조를 의존성이 바뀔 때만 새로 만듭니다. 둘 다 성능 최적화 도구이며, 모든 값과 함수에 습관적으로 붙이면 오히려 코드 복잡도와 메모리 비용이 늘 수 있습니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.