useCallback이란?

useCallback은 React 훅 중 하나로, 함수를 메모이제이션하려 재사용 가능하게 만들어 준다. 이를 통해 불필요한 함수 생성을 방지하고 성능을 최적화한다.

함수형 컴포넌트는 렌더링될 때마다 내부의 함수들이 새로 생성된다. 이는 의도하지 않은 리렌더링과 관련된 문제를 발생시킬 수 있다. 특히 부모 컴포넌트가 리렌더링 될 때 자식 컴포넌트도 함께 리렌더링되는 경우, 새로운 함수가 계속 생성되어 자식 컴포넌트가 불필요하게 업데이트되는 상황이 발생할 수 있다.

useCallback훅은 이러한 문제를 해결하기 위해 사용된다. useCallback을 사용하면 함수를 캐싱하고 필요한 경우에만 새로 생성된다. 이를 통해 의도적인 리렌더링이나 의존성 변경 시에만 함수를 업데이트 할 수 있다.

useCallback의 구문은 다음과 같다.

const memoizedCallback = useCallback(callback, dependencies);

• callback : 메모이제이션할 함수이다.
• dependencies (선택사항) : 함수가 의존하는 값의 배열이다. 이 배열에 포함된 값이 변경될 때마다 함수가 새로 생성된다.

예시

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

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

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

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