useCallback은 useMemo와 같이 컴포넌트의 성능 최적화를 위하여 사용되는 Hook입니다. useCallback은 불필요한 리렌더링을 방지하기 위해 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용합니다.
const memoizedCallback = useCallback(() => {doSomething(a, b)},[a, b]);
useCallback은 위와 같이 두 개의 인자를 받습니다. 첫번째 인자는 메모이제이션할 콜백함수를, 두번째 인자는 useEffect, useMemo와 같이 의존성 배열이 전달됩니다. useCallback은 메모이제이션된 콜백함수를 반환하며, 이 콜백함수는 의존성 배열의 값이 변경되었을 경우에만 갱신됩니다. 만약 의존성 배열의 값이 동일하다면, 해당 함수를 사용하는 컴포넌트가 리렌더링되더라도 새로운 함수가 생성되지 않고 기존 함수가 반환됩니다.
useCallback을 useMemo를 사용해서 표현하면 다음과 같습니다.
const memoizedCallback = useCallback(function, deps);
const memoizedValue = useMemo(() => function, deps);
위의 두 코드는 동일합니다. useCallback은 useMemo를 기반으로 만들어졌기 때문입니다. useCallback은 useMemo에서 값이 아닌 함수를 사용할 때에 편의성을 증진시킨 Hook입니다. 두 Hook은 성능 최적화라는 목적에서는 공통점을 갖지만, 특정 값을 재사용할 것인지 혹은 특정 함수를 재사용할 것인지에 따라 선택적으로 사용할 수 있습니다. useMemo는 값의 재사용을 위해 전달된 함수를 실행하고 그 결과를 메모이제이션하지만, useCallback은 함수의 재사용을 위해 전달된 함수 자체를 메모이제이션합니다.