처음 만난 리액트 문서
7.5 useCallback()
useCallback()훅은 이전에 나온 useMemo()훅과 유사한 역할을 합니다. 한 가지 차이점은 값이 아닌 함수를 반환한다는 점입니다. useCallback()훅은 useMemo()훅과 마찬가지로 함수와 의존성 배열을 파라미터로 받습니다. useCallback()훅에서는 파라미터로 받는 이 함수를 callback이라고 부릅니다. 그리고 의존성 배열에 있는 변수들 중 하나라도 변경이 되면, Memoized된 callback함수를 반환합니다.
const memoizedCallback = useCallback(
() => {
doSomething(의존성 변수1, 의존성 변수2);
},
[의존성 변수1, 의존성 변수2]
);
의존성 배열에 따라 Memoized된 값을 반환한다는 점에서는 useMemo()훅과 완전 동일합니다. 그래서 useCallback(function, dependencies)는 useMemo(() => function, dependencies)와 동일하다고 볼 수 있습니다.
만약 useCallback()훅을 사용하지 않고 컴포넌트 내에 함수를 정의한다면, 매번 렌더링이 일어날 때마다 함수가 새로 정의됩니다. 그래서 useCallback()훅을 사용하여 특정 변수의 값이 변한 경우에만 함수를 다시 정의하도록 하여 불필요한 반복적인 작업을 없애는 것입니다.
예를 들어, useCallback()훅을 사용하지 않고 컴포넌트 내에서 정의한 함수를 자식 컴포넌트에 props로 넘겨서 사용하는 경우에, 부모 컴포넌트가 다시 렌더링이 될 때마다 매번 자식 컴포넌트도 다시 렌더링이 됩니다. 하지만 useCallback()훅을 사용하면 특정 변수의 값이 변한 경우에만 함수를 다시 정의하게 되므로, 함수가 다시 정의되지 않는 경우에는 자식 컴포넌트도 재렌더링이 일어나지 않게 됩니다.
NOTE. 메모이제이션(Memoization)
useMemo()와useCallback()훅에서는 메모이제이션이라는 개념이 나옵니다. 컴퓨터 분야에서 메모이제이션은 최적화를 위해서 사용되는 개념입니다. 비용이 높은(연산량이 많이 드는) 함수의 호출 결과를 저장해놨다가, 같은 입력값으로 함수를 호출하면 새로 함수를 호출하지 않고 이전에 저장해놨던 호출 결과를 바로 반환하는 것입니다. 이렇게 하면 결과적으로 함수 호출 결과를 받기까지 걸리는 시간도 짧아질뿐더러 불필요한 중복 연산도 하지 않기 때문에 컴퓨터의 자원을 적게 쓰게 되겠죠. 메모이제이션 된 결괏값을 영어로는 Memoized value라고 부릅니다. 메모이제이션의 '메모'는 우리가 흔히 '메모하다'라고 표현을 하는 것과 비슷한 맥락이라고 생각하면 기억하기 쉬울 겁니다.
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page