useMemo와 useCallback의 차이는 뭘까

useMemo와 useCallback의 차이는 뭘까

둘다 연산 비용이 큰 작업을 최적화하려고 사용하는 리액트 훅입니다.

중요한 차이점은 반환 값과 사용 목적이라고 생각됩니다.

 

useMemo

메모이제이션된 값을 반환하는 함수

 

연산 비용이 큰 작업의 결과값을 메모이제이션하여 불필요한 재연산을 방지하는 리액트 훅입니다.

useMemo(() => {
	// 연산 비용이 큰 작업
	return 결과값;
}, [deps]);

의존성 배열로 넣어준, deps로 지정한 값이 변한다면 함수를 실행하고 그 함수의 반환 값을 반환합니다

useCallback

메모이제이션된 함수를 반환합니다

 

이벤트 핸들러와 같은 함수의 참조를 메모이제이션하여 불필요한 재렌더링을 방지합니다.

의존성 배열이 변경될때마다 새로운 함수 참조가 생성됩니다.

useCallback(() => {
	// ...함수
}, [deps]);

 

useCallback같은 경우에는 자식 컴포넌트로 핸들러를 전달할때 useCallback으로 감싸서 함수를 props로 내려주고 자식 컴포넌트에서는 React.memo로 감싸서 재렌더링을 방지하는 방법도 있습니다.

 

// 부모컴포넌트
const ParentComponent = () => {
	const handler = useCallback(() => {
		// ...    	
    }, [deps]);

 	// ...
	return <ChildrenComponent handler={handler} />;
};

// 자식컴포넌트
const ChildrenComponent = ({handler}) => {
	return <></>;
};

export default React.memo(ChildrenComponent);