[React] useCallback 이란?

목차

 

 

 useCallback 이란?

 

useCallback은 리렌더링 사이에 함수 정의를  캐시할 수 있게 해주는 React 훅이다.

 

 코드

import { useCallback } from 'react';

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

 매개변수와 반환값

 

매개변수

 fn

캐시하려는 함수 값. 어떤 인자도 받을 수 있고 어떤 값이라도 반환할 수 있다. React는 초기 렌더링을 하는동안 함수를 반환한다(호출하는것이 아님)

다음 렌더링에서 React는 마지막 렌더링 이후 dependencies가 변경되지 않았다면 동일한 함수를 다시 제공한다.

그렇지 않으면 현재 렌더링 중에 전달한 함수를 제공하고 나중에 재사용할 수 있도록 저장한다.

React는 함수를 호출하지 않는다.

함수는 반환되므로 호출 시기와 여부를 결정할 수 있다.

 

 dependencies

fn코드 내에서 참조된 모든 반응형 값의 배열.

반응형 값에는 props, state, 컴포넌트 본문 내부에서 직접 선언한 모든 변수 및 함수가 포함된다.

 

반환 값

 초기 렌더링에서 useCallback은 전달한 fn 함수를 반환한다.

 

 렌더링 중에서는 마지막 렌더링에서 이미 저장된 fn함수를 반환하거나(의존성이 변경되지 않은 경우), 렌더링 중에 전달했던 fn함수를 반환한다.

 

 사용법

 

컴포넌트 리렌더링 건너뛰기

 렌더링 성능을 최적화 할때 자식 컴포넌트에 전달하는 함수를 캐시해야 할 때가 있다.

컴포넌트의 리렌더링 사이에 함수를 캐시하려면, 해당 함수의 정의를 useCallbak훅으로 감싸야한다.

 

useCallback은 성능 최적화를 위해 사용해야 한다.

 

 useCallback과 useMemo는 무슨관련이 있을까?

두 함수는 자식 컴포넌트를 최적화 하려고할 때 유용하다.

useMemo와 함께 useCallback이 자주사용되는 것을 볼 수 있다. 자식 컴포넌트를 최적화 하려고 할 때, 두가지 모두 유용하다.

import { useMemo, useCallback } from 'react';

function ProductPage({ productId, referrer }) {
  const product = useData('/product/' + productId);

  const requirements = useMemo(() => { // Calls your function and caches its result
                                       // 함수를 호출하고 그 결과를 캐시합니다.
    return computeRequirements(product);
  }, [product]);

  const handleSubmit = useCallback((orderDetails) => { // Caches your function itself
                                                       // 함수 자체를 캐시합니다.
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

  return (
    <div className={theme}>
      <ShippingForm requirements={requirements} onSubmit={handleSubmit} />
    </div>
  );
}

둘의 차이점은 캐시할 수 있는 항목에 있다.

 

 useMemo

useMemo는 호출한 함수의 결과를 캐시한다.

이 예제에서는 product가 변경되지 않는 한 변경되지 않도록 computeRequirements(product)를 호출한 결과를 캐시한다.

이렇게하면 불필요하게 ShippingForm을 리렌더링하지 않고도 requirements 객체를 전달할 수 있다.

필요한 경우, React는 렌더링 중에 전달된 함수를 호출하여 결과를 계산한다.

 

 useCallback

useCallback은 함수 자체를 캐시한다.

useMemo와 달리,, 제공한 함수를 호출하지 않는다.

대신 제공한 함수를 캐시하여 productId 또는 referrer 가 변경되지 않는 한 handleSubmit 자체가 변경되지 않도록 한다.

이렇게 하면 불필요하게 ShippingForm을 리렌더링 하지 않고도 handleSubmit 함수를 전달할 수 있다.

사용자가 폼을 제출할 때까지 코드가 실행되지 않는다.