useMemo와 useCallback의 차이를 설명해 주세요

memoizationdependency

useMemo와 useCallback의 차이를 설명해 주세요

예상 시간: 7분

30초 답변

useMemo와 useCallback은 계산 결과나 함수 참조를 재사용하기 위한 memoization hook입니다. useMemo는 어떤 계산의 결과 값을 재사용하고 싶을 때 사용합니다. 예를 들어 큰 배열을 filtering하거나 sorting한 결과를 dependency가 바뀌지 않는 동안 재사용할 수 있습니다. useCallback은 함수 자체의 참조를 안정적으로 유지하고 싶을 때 사용합니다.

보통 memoized child component에 callback을 넘기거나 effect dependency에서 함수 참조가 계속 바뀌는 것을 줄이고 싶을 때 사용합니다. 둘 다 render를 막는 마법은 아니고, dependency 비교와 memoization 비용이 있으므로 실제로 필요한 곳에 쓰는 것이 좋습니다.

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

useCallback을 쓰면 child 리렌더링이 항상 막히나요?

부가 설명

const visibleItems = useMemo(() => {
  return items.filter((item) => item.visible);
}, [items]);

useMemo는 visibleItems라는 계산 결과를 memoize합니다.

const handleSelect = useCallback((id) => {
  setSelectedId(id);
}, []);

useCallback은 handleSelect 함수 참조를 memoize합니다. 이 함수를 React.memo로 감싼 child에게 넘길 때 의미가 생길 수 있습니다.

두 hook을 구분하는 가장 쉬운 기준은 “값을 기억하느냐, 함수를 기억하느냐”입니다. 하지만 함수도 값이므로 useCallback은 useMemo의 특수한 형태로 이해할 수 있습니다.

중요한 건 dependency입니다. dependency를 빠뜨리면 오래된 값을 참조하는 버그가 생길 수 있고, dependency가 매번 바뀌면 memoization 효과가 거의 없습니다.

한 줄 정리

useMemo는 계산 결과를, useCallback은 함수 참조를 memoize하며 둘 다 실제 필요가 있을 때 쓰는 최적화 도구입니다.