• 정의
• 사용 방법
• 특징

정의

<aside> ⌛ useCallback is a React Hook that lets you cache a function definition between re-renders.

</aside>

<aside> 🦜 useCallback은 리액트 훅으로 리렌더 간에 함수 정의를 캐시할 수 있습니다.

</aside>

• useCallback은 메모이제이션 된 함수를 반환한다.

→ 구성 요소의 최상위 층에서 callback을 사용하여 함수 정의를 캐시하는 형식

사용 방법

const cachedFn = useCallback(fn, dependencies)

• fn : 캐시할 함수의 값

  → 어떤 인수를 사용하고 어떤 값도 반환할 수 있음!

  종속성이 변경되지 않은 경우에 동일한 함수를 다시 제공하는 방식

• dependencies : fn 내부에서 참조되는 변화 가능한 값

  → Object.is를 사용하여 종속값 비교를 통해 함수를 재 생성할 것인지 결정한다.

import { useCallback } from 'react';

export default function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

위 코드에서, productId와 referrer가 변화하지 않는 이상, 함수의 내용이 같으므로, 함수를 재 생성하지 않고 반환한다.