useCallback

컴포넌트가 렌더링 될 때 그 안에 있는 함수도 다시 만들게 된다. 하지만 똑같은 함수를 컴포넌트가 리렌더링 된다고 해서 계속 다시 만드는 것은 좋은 현상이 아니다. 그리고 이렇게 컴포넌트가 리렌더링 될 때 마다 함수를 계속 다시 만든다면 이 함수가 자식 컴포넌트에 내려주는 props가 있을 때 자식 컴포넌트도 함수가 새롭게 만들어지니 계속 리렌더링이 일어나 성능에 문제가 발생한다.

 

React.memo를 적용하여 리렌더링 되지 않던 컴포넌트들이 props를 받게 되면 부모가 리렌더링 될 때 다시 리렌더링 발생

이러한 상황을 해결하는 것이 useCallback

 

useCallback이란

메모이제이션 된 함수를 반환하는 함수. (즉 최초 렌더링에 함수 생성할 때 메모이징하여 의존성 배열에 넣은 값이 바뀌지 않으면 계속해서 메모이징된 함수 다시 사용) 

useCallback 적용은 useCallback 안에 콜백 함수와 의존성 배열을 순서대로 넣어주면 된다.

const testFunction = useCallback(() => { }, [] );

 

함수 내에 참조하는 state, props가 있다면 의존성 배열에 추가하면 된다.

 

useCallback으로 인해서 의존성 배열에 추가해둔 state 또는 props가 변하지 않는다면 함수는 새로 생성되지 않음

새로 생성되지 않기에 메모리에 새로 할당되지 않고 동일 참조 값 사용

의존성 배열에 아무 것도 없다면 컴포넌트가 최초 렌더링 될 때만 함수가 생성되며 그 이후에는 동일한 참조 값을 사용하는 함수가 된다.