리액트 Hooks : useCallback()

useMemo() 에 대한 내용은 관련 포스팅 을 참고해주세요 :)

✔️ useCallback()

useCallback() 함수는 앞서 공부했던 useMemo() 함수와 더불어 리액트 성능 최적화에 사용되는 React Hooks 입니다.

간단히 말해 useMemo() 는 어떤 결과값을 재사용할 때 사용하였고, useCallback()은 함수를 새로 만들지 않고 재사용하고 싶을 때 사용하는 것입니다. 언뜻 보면 비슷해보이지만 확실히 다른 기능을 합니다.

✔️ useCallback() 사용법

const memoizedCallback = useCallback(함수, 배열);

위와 같이 첫 번째 인자로는 함수가, 두번째 인자로는 배열 형태의 함수 실행 조건이 들어가는데요.
두 번째 인자로 넘어온 배열 형태 조건의 값이 변경될 때까지, 첫 번째 인자로 넘어온 함수를 Memoization 할 수 있게 해주는 것입니다.

const add = () => x + y;

기본적으로 위와 같은 함수가 React 컴포넌트 안에 선언이 되어 있다면, 해당 컴포넌트가 렌더링 될 때마다 새롭게 함수를 생성하는데요.

const add = useCallback(() => x + y, [x, y]);

위 처럼 useCallback() 을 적용하게되면 x, y의 값이 바뀔 때는 새로운 함수가 선언되어 add 변수에 할당되고, 바뀌지 않으면 함수를 재사용하게 됩니다.

✔️ 참고사이트

https://velog.io/@rjsdnql123/TIL-React.useCallback-%EC%9D%B4%EB%9E%80
https://www.daleseo.com/react-hooks-use-callback/

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)