[React] useCallback - 최적화

💡 useCallback ?

 

useCallback은 React.memo, useMemo와 같이

memoization과 관련된 최적화 기능에 사용되는 React Hook이다.

 

useMemo와 동일하게 함수형 컴포넌트 안에서만 사용 가능하다.

 

 

 

✅ 언제

 

컴포넌트의 리렌더링으로 불필요하게 함수가 재생성되는 경우,

특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다.

 

 

✅ 어떻게?

 

const function1 = useCallback(() => {} , [/* 의존성 배열 */] );

 

의존성 배열에 변화를 감지할 인자를 전달하면,

배열 내부의 값이 바뀔 때 마다 useCallback의 첫 번째 인자인 콜백 함수를 호출해 memoization된 함수로 리턴한다.

 

 

❗ 주의

 

의존성 배열에 빈 배열을 전달하면 컴포넌트에 mount 되는 시점에 한번만 실행된다.

 

 

 

 

 

 

useMemo, React.memo와 함께 최적화를 위해 쓰이는 기능으로 함께 비교해봐도 좋다.

https://oneyenee.tistory.com/48

[React] React.memo와 useMemo의 차이