비슷하면서 다른 useCallback과 usePreservedCallback에 대해 정리를 간략히 해보았습니다.

useCallback훅

공식문서에서 useCallback훅은 다음과 같이 정의되어 있어요.

useCallback훅은 함수를 메모리제이션하며, 리렌더링 간에 함수를 재사용합니다.

간단한 사용법은 다음과 같아요.

useCallback(fn,deps)

• 첫 번째 인자는 메모이제이션할 함수입니다.
• 두 번째 인자는 의존성 배열로, 배열 내 값이 변경될 때만 함수가 재생성됩니다.배열이 비어 있으면, 함수는 컴포넌트가 처음 마운트할 때 생성하고 이후 재렌더링에서는 재생성하지 않습니다.

다만 컴포넌트에서 콜백 함수를 사용할때, 의존성 배열이 빈상태로 있으면 해당 함수가 최신 상태를 참조하지 않습니다.

• 의존성 배열 내의 값이 바뀔때마다, 새로운 함수를 만들고, 참조를 변경합니다. 함수를 props로 전달하거나, 다른 훅의 의존성으로 사용할 때, 문제가 생길 수 있습니다.

예를 들어서

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

  const handleClick = useCallback(() => {
    console.log(count);
  }, []);

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>클릭</button>
      <button onClick={() => setCount(count + 1)}>증가 버튼</button>
    </div>
  );
};

• handleClick 함수의 의존성에 count를 넣어주지 않는다면 어떻게 될까요 ?
• handleClick에서 참조하는 count의 값은 계속 0입니다.
• 개발하는 과정에서 [React] exhaustive-deps 에러를 만날 수 있습니다.. 😓