[React] useCallback 란?

사용 목적

useCallback 훅은 주로 두 가지 주요 목적으로 사용됩니다:

1. 불필요한 자식 컴포넌트의 렌더링 방지: React는 부모 컴포넌트가 렌더링될 때마다 자식 컴포넌트에 전달된 함수가 새로운 참조를 가지게 됩니다. 이는 자식 컴포넌트에 React.memo를 사용하더라도, 함수 props가 변경되었다고 간주하여 자식 컴포넌트의 불필요한 렌더링을 유발할 수 있습니다. useCallback을 사용하여 함수를 메모이제이션함으로써, 이 문제를 해결할 수 있습니다.
2. 의존성 배열 내의 함수 사용: 커스텀 훅이나 useEffect, useMemo 등 다른 훅 내부에서 콜백 함수를 의존성으로 사용할 때, 함수의 참조가 변경되지 않도록 보장해야 할 필요가 있습니다. useCallback은 이러한 경우에도 유용하게 사용됩니다.

사용 시 주의사항

• 의존성 배열 관리: useCallback의 의존성 배열을 올바르게 관리하는 것이 중요합니다. 의존성 배열 내에 포함된 값이 변경될 때만 함수가 재생성되므로, 배열을 정확히 관리해야 합니다.
• 남용 방지: 모든 함수에 useCallback을 사용하는 것은 권장되지 않습니다. 메모이제이션은 추가적인 메모리를 사용하며, 성능 최적화가 반드시 필요한 경우에만 사용해야 합니다.

예제 코드 및 의존성 설정 방법

아래 예제에서는 useCallback을 사용하여 카운터 값을 증가시키는 함수를 메모이제이션하는 방법을 보여줍니다. 이를 통해 자식 컴포넌트가 불필요하게 재렌더링되는 것을 방지합니다.

import React, { useState, useCallback } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  // useCallback을 사용하여 increment 함수를 메모이제이션합니다.
  // 의존성 배열이 빈 배열이므로, 이 함수는 컴포넌트가 처음 렌더링될 때 한 번만 생성됩니다.
  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]); // count를 의존성 배열에 추가합니다.

  return (
    <div>
      Count: {count}
      <button onClick={increment}>Increment</button>
    </div>
  );
}

function App() {
  return <Counter />;
}

의존성 배열 설정 방법

• 함수 내에서 사용하는 모든 상태나 props는 의존성 배열에 포함시켜야 합니다. 이 예제에서는 increment 함수가 count 상태를 사용하기 때문에, count를 의존성 배열에 추가합니다.
• 만약 setCount와 같이 React 훅에서 제공하는 상태 업데이트 함수나, 변경되지 않는 값들은 의존성 배열에 추가할 필요가 없습니다.

useCallback의 올바른 사용은 컴포넌트의 성능을 최적화하고, 불필요한 렌더링을 줄이는 데 큰 도움을 줍니다.
그러나 실제로 성능 문제가 발생한 경우에만 적용하는 것이 좋으며, 모든 함수에 무분별하게 사용하는 것은 피해야 합니다.