[React] useCallback

useCallback

React 컴포넌트가 렌더링될 때 그 안에 있는 함수도 다시 만들게 된다.
하지만 똑같은 함수를 컴포넌트나 리렌더링 된다고
계속 다시 만드는 것을 비효율적이다.

만약 다시 만들어진 함수가 자식 컴포넌트에 prop로 전달된다면
React.memo를 사용하더라도 다시 렌더링되게 된다.

useCallback의 첫번째 파라미터로 함수 표현식을 사용하고
두번째 파라미터로 의존성 배열을 넣어준다.

const handleFunc = useCallback(() => {
  // 함수 내용
}, [dependency]);

이 배열에 존재하는 값들이 변하지 않는다면 함수는 새로 생성되지 않는다.
그렇기 때문에 메로리에 새로 할당되지 않고 동일한 참조값을 사용한다.

만약 의존성 배열에 아무것도 없다면
컴포넌트가 최초 렌더링 시에만 함수가 생성되며 이후에는 새로 생성되지 않는다.
즉 동일한 참조 값만 사용하는 함수인 것이다.

하지만 메모이제이션은 계산 비용을 줄이기 위한 기법이지만
메모리를 더 사용한다.

따라서 모든 함수를 메모제이션하는 것은 좋지 않다.

• 대상 함수가 계산 비용이 큰 경우
• 대상 함수가 종속성을 가지며 자주 변경되는 경우
• 대상 함수를 하위 컴포넌트에 전달하고, 이 컴포넌트가 React.memo 또는 shouldComponentUpdate를 사용하는 경우

에 사용하는 것이 좋다.

메모

함수들은 주로 스코프 최상단 부모에 위치한다.
즉 스코프 최상단 컴포넌트에서 주로 사용하는 최적화 기법으로 볼 수 있겠다.