useCallback

❌ useCallback 없는 경우 (문제 상황)

function App() {
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    console.log("클릭");
  };

  return (
    <>
      <button onClick={() => setCount(count + 1)}>
        count 증가
      </button>
      <Child onClick={handleClick} />
    </>
  );
}

const Child = React.memo(({ onClick }) => {
  console.log("Child 렌더");
  return <button onClick={onClick}>자식 버튼</button>;
});

1️⃣ count 증가 클릭
2️⃣ App 리렌더
3️⃣ handleClick 새로 생성됨
4️⃣ Child 입장에서는

“어? onClick 바뀌었네?”
5️⃣ Child 다시 렌더 😵

👉 count랑 Child는 아무 상관도 없는데!

---

 

✅ useCallback 쓴 경우 (해결)

function App() {
  const [count, setCount] = React.useState(0);

  const handleClick = React.useCallback(() => {
    console.log("클릭");
  }, []);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>
        count 증가
      </button>
      <Child onClick={handleClick} />
    </>
  );
}

🔎 이제는?

1️⃣ App 리렌더
2️⃣ handleClick 안 바뀜 (기억됨)
3️⃣ Child 입장:

“props 안 바뀌었네?”
4️⃣ ❌ Child 렌더 안 함 🎉

 

useCallback = "이 함수, 다시 만들지 마"

Child 렌더   ← 처음 1번만

 

🚨 useCallback 쓰지 말아도 되는 경우

<button onClick={() => console.log("클릭")} />

 

• 자식 없음
• memo 없음
• 렌더링 영향 없음

👉 ❌ 쓰지 않기

 

🧩 마지막 한 줄

useCallback은 “렌더링 줄이기용” 메모장이다