useCallback의 사용이유

useCallback은 React에서 제공하는 Hook 중 하나로, 메모이제이션(memoization)된 버전의 콜백 함수를 반환합니다. 이 Hook의 주된 목적은 불필요한 리렌더링을 최소화하고 성능을 개선하는 것입니다.

useCallback의 사용 이유

리액트 컴포넌트에서 함수를 props로 전달할 때는 해당 함수가 변경되지 않도록 보장하는 것이 중요합니다. 함수가 변경되면, 그 함수를 props로 받는 컴포넌트가 불필요하게 다시 렌더링 될 수 있기 때문입니다.

그러나, 컴포넌트가 리렌더링될 때마다, 그 컴포넌트 내부에서 정의된 모든 함수는 새롭게 생성됩니다. 이것은 그 함수를 props로 받는 컴포넌트에게는 새로운 props를 받은 것과 같으므로, 그 컴포넌트를 다시 렌더링하게 만듭니다.

이 문제를 해결하기 위해 useCallback Hook을 사용할 수 있습니다. useCallback은 함수를 메모이제이션하여, 동일한 의존성이면 동일한 함수를 반환하게 됩니다. 이렇게 하면 함수가 변경되지 않으므로, 그 함수를 props로 받는 컴포넌트는 불필요하게 다시 렌더링되지 않게 됩니다.

useCallback 사용 예시

아래는 useCallback을 사용하는 간단한 예시입니다:

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

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

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

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

export default Example;

위 예시에서 increment 함수는 useCallback을 사용하여 메모이제이션되었습니다. increment 함수의 의존성 배열에 count를 포함시킴으로써, count가 변경될 때만 새로운 increment 함수가 생성되고, count가 변경되지 않으면 이전에 생성된 increment 함수가 재사용됩니다.

이렇게 하면, increment 함수를 props로 받는 컴포넌트는 count가 변경되지 않는 한 불필요하게 다시 렌더링되지 않게 됩니다. 이는 성능을 개선하고, 애플리케이션의 반응성을 높이는데 도움이 됩니다.