React useCallback

---

🔁 useCallback이란?

정의

useCallback은 컴포넌트가 다시 렌더링될 때 함수의 동일한 참조를 유지하도록 도와주는 React Hook이다.

함수를 매번 새로 만들지 않고 재사용하도록 해서, 자식 컴포넌트 리렌더링을 줄이는 데 도움이 된다.

🧩 언제 쓰는가?

• 함수를 props로 내려줄 때
• React.memo와 함께 자식 렌더링을 줄이고 싶을 때
• useEffect 의존성 배열에 함수가 들어갈 때
• 불필요한 함수 재생성을 줄이고 싶을 때

🛠️ 기본 사용 예시

import { useCallback, useState } from "react";

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

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

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

🔗 props로 전달할 때

import { memo, useCallback, useState } from "react";

const Child = memo(function Child({ onIncrement }) {
  console.log("Child 렌더링");
  return <button onClick={onIncrement}>Increment</button>;
});

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

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

  return <Child onIncrement={increment} />;
}

⚖️ useCallback과 useMemo

Hook	역할	주로 캐싱하는 것
useCallback	함수 참조를 캐싱한다	함수
useMemo	계산 결과를 캐싱한다	값

⚠️ 주의점

• 모든 함수에 무조건 사용할 필요는 없다.
• 오히려 코드가 복잡해질 수 있다.
• 성능 최적화가 실제로 필요한 지점을 보고 적용하는 것이 좋다.

📌 정리

• useCallback은 함수 참조를 유지하기 위한 Hook이다.
• 함수 props 전달이나 React.memo와 함께 쓸 때 의미가 크다.
• 과하게 쓰기보다 필요한 곳에만 쓰는 편이 좋다.

---

연결문서

• React-Component
• React-Props
• React-EventHandler
• React-LifeCycle
• useEffect