[React 성능 최적화] 3. useCallback

useCallback

useCallback은 함수를 메모이제이션하는 데 사용된다. 컴포넌트가 다시 렌더링되더라도 동일한 함수 인스턴스를 유지한다.

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

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

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

  return <button onClick={increment}>Count: {count}</button>;
};

언제?

자식 컴포넌트에 함수를 props로 전달할 때, 불필요한 렌더링을 방지하기 위해 사용

주의사항

의존성 배열을 정확히 설정하지 않으면 함수가 갱신되지 않을 수 있음

useCallback을 사용하지 않아야 하는 경우

useCallback은 함수를 메모이제이션하는 도구로, 주로 자식 컴포넌트에 props로 전달할 때 유용합니다. 하지만 아래 상황에서는 사용하지 않는 것이 좋다.

1. 함수가 자주 변경될 필요가 없을 때
   단순한 함수라면 굳이 메모이제이션하지 않아도 성능 차이가 거의 없다.
   

2. 함수가 컴포넌트 내부에서만 사용될 때
   컴포넌트 내부에서만 호출되는 함수는 메모이제이션할 필요가 없습니다. 기본적으로 함수는 렌더링 시 다시 생성되어도 큰 영향을 미치지 않는다.

3. 의존성 관리가 복잡할 때
   의존성 배열을 정확히 설정하지 않으면 메모이제이션된 함수가 오래된 상태나 값을 참조할 수 있습니다.오히려 버그를 유발할 가능성이 있다.