(React) 리엑트 최적화 : useCallback hook

간단하게 정의하면 이벤트 핸들러 함수를 재사용하는 것이다.
useMemo와 비슷하지만, Component들이 props가 바뀌지 않았다면, 아예 리렌더링 시에 기존의 Component를 재사용하게 만들 수 있는데 이를 위해서는 안의 내용물들이 새로 만들어지지 않아야 한다.

useCallback은 함수를 재사용하도록 해 새로 만들어지지 않게 해야한다.

import {useCallback} from 'react';
// import 문은 위와 같다 
const functionName = useCallback(() => {A}, {B});

useMemo와 거의 동일한데, B의 값이 변경되지 않은 경우에만 이벤트 핸들러 함수 A를 재사용한다.

useMemo 전에 구했던 값을 다시 구하는데 걸리는 시간을 줄이기 위해 해당 함수에 사용된 변수의 값이 변하지 않았다면 리렌더링시에 재사용

useCallback 전에 렌더링 된 이벤트 핸들러 함수에 사용된 변수의 값이 변하지 않았다면 리렌더링시에 재사용한다. => Component재사용 시 필요하다.