[React] 훅(Hook) - useCallback

 

 

1. 정의

- useMemo() 훅과 유사한 역할, 차이점은 값이 아닌 함수를 반환한다는 것

- 특정 변수의 값이 변한 경우에만 함수를 다시 정의하게 되므로 함수가 다시 정의되지 않는 경우에 자식 컴포넌트도 재렌더링이 일어나지 않음

 

2. 사용 방법

- 함수와 의존성 배열을 파라미터로 받음

- 파라미터로 받는 함수를 콜백이라고 부름

- 의존성 배열에 있는 변수 중 하나라도 변경되면 Memoized 콜백 함수 반환

useCallback(function, dependencies)

const memoizedCallback = useCallbck(
	() => {
    	doSomething(의존성 변수1, 의존성 변수2);
    },
    [의존성 변수1, 의존성 변수2]
);

 

 

메모이제이션(Memoization) 비용이 높은(연산량 많은) 함수의 호출 결과를 저장해 두었다가 같은 입력값으로 함수를 호출하면 새로 함수를 호출하지 않고 이전에 저장해놨던 호출 결과를 바로 반환하는 것 - 시간 단축, 중복 연산 감소로 컴퓨터 자원을 적게 쓰게되는 장점이 있음 - 메모제이션이 된 결과값을 Memoized value라고 함