useMemo는 React의 훅(hook)으로, 연산 결과(값)를 메모이제이션(memoization)하여 불필요한 재계산을 피하도록 도와줍니다. 즉, 렌더링이 반복될 때 동일한 입력(dependencies)이면 이전에 계산한 값을 재사용하여 성능을 개선하는 목적입니다. 주요 특징과 사용법 - 기본 형태: const memoizedValue = useMemo(() => expensiveComputation(a, b), [a, b]); - 첫 인자는 값(또는 객체)을 반환하는 함수이고, 두 번째 인자는 의존성 배열입니다. - 의존성 배열의 값이 바뀌면 콜백이 다시 실행되어 값을 재계산합니다. - 언제 유용한가 - 계산 비용이 큰 연산(expensive computation)을 렌더마다 반복하지 않게 할 때. - 객체나 배열 등을 생성해 자식 컴포넌트에 props로 넘길 때, 참조(identity)가 불필요하게 바뀌어 자식이 불필요하게 재렌더링되는 것을 막을 때. - useCallback과의 차이 - useMemo는 "값"을 메모이제이션하고, useCallback은 "함수"를 메모이제이션합니다(사실 useCallback(fn, deps)은 useMemo(() => fn, deps)의 특수 케이스). - 주의할 점 - 의존성 배열에 필요한 모든 값을 포함해야 합니다. 누락하면 오래된(closed-over) 값을 사용해 버그가 생길 수 있습니다. - React는 useMemo의 값을 절대적으로 캐시해 줄 것을 강제하지 않습니다 — 성능 최적화용 힌트로 생각해야 하며, 정확성(정상 동작)을 위해 의존성 관리에 의존하면 안 됩니다. - 연산 비용이 거의 없거나 렌더 비용이 작은 경우엔 오히려 복잡성만 늘어나므로 남용하지 않는 것이 좋습니다. - ESLint의 react-hooks 규칙을 따르면 의존성 누락을 방지할 수 있습니다. 간단한 예시 - 무거운 계산 memoization: const fib = (n) => { /* 느린 계산 */ }; const result = useMemo(() => fib(n), [n]); - 자식에 전달하는 객체 참조 고정: const options = useMemo(() => ({ count, enabled }), [count, enabled]);
요약하면, useMemo는 특정 값의 재계산을 제어해서 성능을 개선하는 도구이며, 의존성 관리를 정확히 하고 필요할 때만 사용하는 것이 좋습니다.
