The React Hooks - useCallback

01.The React useCallback Hook은 memoized된 callback function을 반환한다.

w3schools 에서는 useCallback을 사용하면 값이 더는 계산될 필요가 없다고 저장하는 것으로 간주한다.라고 정의하고있다.

02.useCallback은 리소스가 집약된 함수들이 랜더될때마다 자동 실행되지 않게 격리한다.

즉 useMemo처럼 dependecies 업데이트 될때만 작동하도록 한다.
사용법또한 비슷하다.
useCallback(function, declare array), 함수와 의존하는 배열을 입력받고, 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환합니다.

즉 의존하는 값이 바뀌면 새로운 함수가 생성되어 함수의 변수에 할당되고, 의존하는 값이 동일하다면 다음 랜더링 때 이 함수를 재사용 한다.

const memoizedCallback = useCallback(함수, 배열);
const add = () => x + y; //매번 랜더링 된다.
const add = useCallback(() => x + y, [x, y]); //callback 사용
                            함수      의존 값

03.사용하는 이유

사실 component가 rendering될 때마다 함수를 새로 선언하는 것은 javascript가 브라우저에서 얼마나 빨리 실행되는지를

생각해보면 성능 상 큰 문제가 되지 않는다.

따라서 useCallback()을 사용하는 것은 큰 의미가 없거나 오히려 손해인 경우도 있다.

useCallback을 사용하는 한 가지 이유는 props가 변경되지 않는 한 component가 re-rendering되지 않도록 하기 위함이다.

**

useCallback() hook 함수는 자식 컴포넌트의 랜더링의 불필요한 랜더링을 줄이기 위해서 

React.memo() 함수와도 사용할 수 있다.

간단한 예제는 아래의 주소에 가서 확인해보면 된다.

https://www.daleseo.com/react-hooks-use-callback/

React Hooks: useCallback 사용법