[React Docs] 2-2. useCallback (1)

리액트 공식 문서(react.dev) 읽기

Built-in React Hooks
1. useTransition
2. useCallback

 

📍useCallback

✅리렌더링 간 함수 정의를 캐시할 수 있는 훅

- 컴포넌트 상단에서 호출

const cachedFn = useCallback(fn, dependencies)

 

📍useCallback(fn, dependencies)

✅매개변수

fn

- 종속성 배열(dependency array) 의 원소가 바뀌지 않으면 캐시되는 함수

- 종속성 배열의 원소가 바뀌면, 렌더링 중에 전달한 콜백 함수를 리턴하고, 재사용에 대비하여 저장(캐싱)

 

dependencies

- fn 코드 내부에서 참조되는 모든 반응형 값(props, state 및 컴포넌트 내부의 모든 변수와 함수) 배열

- 각각의 종속성을 Object.is 메서드로 비교 (얕은 비교)

 

✅반환값

- 최초 렌더링 시 : 전달받은 fn 함수를 리턴

- 이후 리렌더링에서 종속성 배열의 원소가 바뀌면, 이 때 새로 전달받았던 fn(fresh)을 리턴

- 바뀌지 않았으면 캐시된 fn을 리턴

 

✅주의사항

- 훅이므로 컴포넌트 혹은 커스텀 훅 내부에서만 호출 가능

- 조건문이나 반복문 내부에서 호출 불가

 

📍컴포넌트의 리렌더링 생략

리렌더링간에 캐시할 함수를 useCallback 훅으로 래핑한다

import { useCallback } from 'react';

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

 

예를 들어, handleSubmit 함수를 ShippingForm 컴포넌트로 전달한다면..

function ProductPage({ productId, referrer, theme }) {
  // ...
  return (
    <div className={theme}>
      <ShippingForm onSubmit={handleSubmit} />
    </div>
  );

 

theme가 바뀌면 div element 하위가 전부 리렌더링될 것이다. 그런데 shipppingForm 컴포넌트의 렌더링이 느리면, 이를 제거하는 것이 앱 성능에 좋을 것이다. 이 때가 shipppingForm 컴포넌트를 최적화할 때이다.

 

만약, memo를 사용하여 shipppingForm 컴포넌트를 메모이제이션했다면 (useCallback 미사용)

import { memo } from 'react';

const ShippingForm = memo(function ShippingForm({ onSubmit }) {
  // ...
});

// ...

function ProductPage({ productId, referrer, theme }) {
  // Every time the theme changes, this will be a different function...
  function handleSubmit(orderDetails) {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }
  
  return (
    <div className={theme}>
      {/* ... so ShippingForm's props will never be the same, and it will re-render every time */}
      <ShippingForm onSubmit={handleSubmit} />
    </div>
  );
}

 

shipppingForm 컴포넌트는 모든 props가 변경되지 않으면 메모이제이션된다!

 

⭐그런데, JavaScript에서는 funtion () {} 또는 () => {} 같은 함수는 언제나 다른 함수이다(메모리 주소가 다름)

 

따라서 handleSubmit은 렌더링 마다 다른 함수가 되어 memo 최적화가 무용지물이 된다. 이를 방지하기 위해 useCallback을 handleSubmit에 사용할 수 있다

 

⭐useCallback 은 단순히 성능 최적화를 위한 용도이며 기능 구현과는 관계 없다

 

📍useMemo 와 useCallback 비교

✅useMemo

- 함수의 호출 결과를 캐싱 (즉, 값을 캐싱)

 

✅useCallback

- 함수 그 자체를  캐싱

useMemo와 다르게, 전달받은 함수를 호출하지 않음