이번 포스팅에서는 useMemo() 함수와 더불어 성능 최적화에 사용되는 React의 useCallback() hook 함수에 대해서 알아보겠습니다.

함수 메모이제이션

*useCallback() 은 함수를 메모이제이션(memoization)하기 위해서 사용되는 hook 함수입니다. 첫 번째 인자로 넘어온 함수를, 두 번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해 놓고 재사용 할 수 있게 해줍니다.*

const memoizedCallback = useCallback(함수, 배열);

예를 들어, 어떤 React 컴포넌트 함수 안에 함수가 선언이 되어 있다면 이 함수는 해당 컴포넌트가 렌더링될 때 마다 새로운 함수가 생성됩니다.

const add = () => x + y;

하지만 useCallback()을 사용하면, 해당 컴포넌트가 렌더링되더라도 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환합니다. 즉, x 또는 y값이 바뀌면 새로운 함수가 생성되어 add 변수에 할당되고, x 와 y 값이 동일하다면 다음 렌더링 때 이 함수를 재사용합니다.

const add = useCallback(() => x + y, [x, y]);

사실 컴포넌트가 렌더링될 때마다 함수를 새로 선언하는 것은 자바스크립트가 브라우저에서 얼마나 빨리 실행되는지를 생각해보면 성능 상 큰 문제는 되지 않습니다. 따라서 단순히 컴포넌트 내에서 함수를 반복해서 생성하지 않기 위해서 useCallback() 을 사용하는 것은 큰 의미가 없거나 오히려 손해인 경우도 있습니다.

그럼 도대체 useCallback() hook 함수는 어떻게 쓸 때 의미있는 성능 향상을 기대할 수 있을까요?

자바스크립트 함수 동등성

*useCallback() hook 함수를 언제 사용해야하는지 제대로 이해하려면 먼저 자바스크립트에서 함수 간의 동등함이 어떻게 결정되는지 알 필요가 있습니다.*

브라우저 콘솔을 열고 다음과 같이 동일한 코드의 자바스크립트 함수가 동일한지 === 연산자를 통해 비교를 해보면 false 가 반환될 것입니다.