useCallback 예시를 통한 이해

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

const ExampleComponent = ({ onClick }) => {
  return <button onClick={onClick}>Click me</button>;
};

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

  // useCallback을 사용하여 메모이제이션된 콜백 함수 생성
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // count가 변경될 때만 함수 재생성

  return (
    <div>
      <p>Clicked {count} times</p>
      <ExampleComponent onClick={handleClick} />
    </div>
  );
};

export default App;

한 마디로 클릭하지 않으면 count값이 변경되지 않기 때문에 handleClick함수가 생성되지 않음 

즉, 불필요한 리랜더링 방지