[React] useCallback은 언제 사용할까?

useCallback이란?

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  }, // 1. 인라인 콜백함수
  [a, b], // 2. 콜백함수의 의존성 값 배열
);

useCallback은 메모이제이션된 콜백을 반환한다.

(* 메모이제이션: 컴퓨터 프로그램이 동일한 계산을 반복해야할때, 이전에 계산한 값을 메모리에 저장해 놓음으로써 동일하나 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술)

(* callback 함수: 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수. 콜백함수를 전달받은 함수는 고차함수라 한다.)

arguments

1. 인라인 콜백함수
2. 콜백함수의 의존성 값 배열

return value

콜백의 메모이제이션된 버전을 반환하며, 반환된 콜백은 의존성이 변경되었을 때만 변경된다.

useCallback의 장점

리액트 컴포넌트에 정의된 함수들은 컴포넌트가 리랜더링 될때마다 함수 또한 새로 만들어진다. 물론 이렇게 함수를 다시 선언하는 것이 큰 부하를 일으키지는 않을 수 있지만, 한번 만든 함수를 필요할때만 새로 만들고 재사용하는 것은 여전히 중요하다.

useMemo와 useCallback의 차이

useMemo는 메모이제이션된 "값"을 반환하는 반면 useCallback은 "함수"를 반환한다는 것에 차이가 있다. useMemo 또한 의존성이 변경되었을 때에만 메모이제이션된 값을 다시 계산한다. 따라서 비용이 높은 복잡한 계산을 거친 값을 사용할 때 유용하다.

Refs

https://reactjs.org/docs/hooks-reference.html#usecallback