[React] useCallback

useCallback은 useMemo와 비슷하게 메모이제이션 기법으로 컴포넌트 성능을 최적화 시켜주는 React hook입니다.

인자로 전달한 콜백 함수 자체를 memoization 해줍니다.

useCallback의 구조

useCallback은 두 개의 인자를 받습니다.

첫 번째 인자는 메모이제이션할 콜백 함수를 받고, 두 번째 인자는 배열을 받습니다. 의존성 배열(dependency array)이라고도 부릅니다. 배열 안의 요소가 업데이트될 때만 메모이제이션 되는 함수를 업데이트합니다.

만약 빈 배열이 들어간다면, 컴포넌트가 맨 처음 mount 될 때에만 값을 계산하고 이후에는 메모이제이션된 값을 가져와서 사용합니다.

사용 방법은 메모이제이션할 함수를 useCallback으로 감싸주면 됩니다.

const calculate = useCallback((num) => {
	return num + 1
}, [item])

이제 calculate라는 변수는 메모이제이션된 함수를 갖게 되는 것입니다.

함수가 다시 필요할 때마다 메모리에서 가져와서 재사용하게 됩니다.

function App() {
    const calculate = (num) => {
	    return num + 1
	};
	return <div>...</div>
}

App 함수 호출 -> 모든 내부 변수 초기화

useCallback을 사용하게 되면 렌더링 과정은 다음과 같습니다.

function App() {
	const calculate = useCallback((num) => {
	    return num + 1
    }, [item])
	return <div>{value}</div>
}

App 함수 호출 -> 메모이제이션된 함수를 재사용

컴포넌트가 다시 랜더링 되더라도 calculate가 초기화 되는 것을 막을 수 있습니다.