React 앱 성능 최적화 4 - useCallback

목차

• useCallback
• 사용법

 

useCallback

 

useCallback은 리액트 최적화에 사용되는 기능 중 하나입니다. useCallback이 필요한 이유는 컴포넌트가 렌더링 될 때 그 안에 있는 함수도 다시 만들게 됩니다. 하지만 똑같은 함수가 컴포넌트가 리렌더링 될 때마다 다시 생성되는 것은 낭비입니다. 그리고 만약 함수를 자식 컴포넌트에 props로 내려준다면 함수를 포함하고 있는 컴포넌트가 리렌더링 될 때마다 자식 컴포넌트도 함수가 새로 만들어지니 리렌더링을 하게 됩니다.

 

이러한 무분별한 리렌더링을 최소화하기 위해 함수를 최적화하는 기능이 바로 useCallback입니다.

 

 

사용법

 

useCallback 적용은 useCallback 안에 콜백함수와 의존성 배열을 순서대로 넣어주면 됩니다. 함수 내부에서 참조하는 state, props가 있다면 의존성 배열에 추가해야 합니다.

 

// 첫 번째 인자 : 함수, 두 번째 인자 : 의존성 배열
const sample = useCallback(() => {}, [])