React useCallback

useCallback은 React Hook 중 하나로, 함수 컴포넌트에서 함수를 메모이제이션하는 데 사용됩니다. 이 Hook은 렌더링 시마다 새로 생성되는 함수를 방지하여 성능을 최적화하는데 도움을 줍니다. 주로 자식 컴포넌트에 함수를 전달할 때 불필요한 렌더링을 방지하는 데 유용합니다.

기본 사용법

import { useCallback } from 'react';

const MyComponent = () => {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []); // 빈 배열은 이 함수가 컴포넌트가 마운트될 때 한 번만 생성됨을 의미

  return <button onClick={handleClick}>Click me</button>;
};

의존성 배열

useCallback의 두 번째 인수로 의존성 배열을 받습니다. 배열에 지정된 값들이 변경될 때만 함수가 새로 생성됩니다. 빈 배열([])을 전달하면, 컴포넌트가 처음 렌더링될 때 한 번만 함수를 생성하고, 그 이후에는 재사용됩니다.

예시

import { useState, useCallback } from 'react';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  // useCallback을 사용해 함수를 메모이제이션
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // 빈 배열로 컴포넌트가 마운트될 때 한 번만 생성됨

  return <ChildComponent onClick={increment} />;
};

const ChildComponent = ({ onClick }) => {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Increment</button>;
};

언제 사용해야 할까?

1. 자식 컴포넌트에 함수를 전달할 때: 자식 컴포넌트가 함수 변경으로 불필요하게 다시 렌더링되는 것을 방지합니다.
2. 성능 최적화가 필요할 때: 렌더링을 최적화해야 할 경우 useCallback을 사용하여 불필요한 함수 재생성을 방지할 수 있습니다.

useCallback을 과도하게 사용하면 오히려 코드가 복잡해지고 성능이 저하될 수 있기 때문에 성능 최적화가 필요할 때에만 사용하는 것이 좋습니다.