[ React ] - 훅(Hook) 종류와 사용법 ( useCallback )

[ React ] - 훅(Hook) 종류와 사용법 ( useCallback  )

useCallback

useCallback은 함수를 캐싱하고, 재사용할 수 있게 해주는 훅으로, 성능 최적화를 위해 활용됩니다. useCallback은 함수를 매번 새로 생성하는 것을 막아주어 불필요한 렌더링을 줄이고 메모리 사용을 최적화시키는데 도움을 줍니다.

useCallback의 경우 상위 컴포넌트에서 정의한 함수를 하위 컴포넌트에 props로 전달하여 사용시 함수를 메모리제이션함으로써, 상위 컴포넌트의 렌더링과 무관하게, 함수가 사용될 때에만 새로 생성되도록 하여 성능을 최적화하는데 도움을 줍니다.

사용법

useCallback은 기본적으로 두 개의 인자를 갖는데, 첫 번째 인자로는 콜백 함수가 들어가며 해당 함수가 메모리제이션 됩니다. 두 번째 인자로는 의존성 배열을 전달하는데, 배열에 넣어준 값이 변경될 때에만 함수가 재생성됩니다.

예시 코드

위의 코드에서 보면 handleComplicatedFunction을 useCallback을 사용하여 메모리제이션 하였는데, 이와 같이 할 경우 상위 컴포넌트가 리렌더링 되더라도 함수를 새롭게 생성하지 않고, useCallback의 두 번째 인자로 준 count의 값이 변할 때에만 함수를 새롭게 생성하여 성능을 최적화할 수 있습니다.