[React] useCallback 정확히 쓰기

✨ useCallback 정확히 쓰기 : 함수 재생성 방지와 최적화의 균형

⚙️ useCallback과 함수 재생성 방지

• React 앱에서 성능 최적화의 핵심 중 하나는 불필요한 함수 재생성을 막는 것이다.
• useCallback은 이를 위한 메모이제이션 훅이다.

🛠️ useCallback이란?

• 함수를 메모이제이션하여 컴포넌트가 리렌더링될 때마다 함수가 새로 만들어지는 것을 방지한다.
• useMemo와 비슷하지만, 값이 아닌 "함수"를 반환한다.
• 리렌더링 시, 의존성이 변경되지 않으면 기존 함수를 재사용한다.

✅ 사용 예시

const onCreate = useCallback(() => {
  console.log("created!");
}, []);

• 첫 번째 인수: 최적화하고자 하는 함수
• 두 번째 인수: 의존성 배열 (함수 내부에서 사용하는 외부 값들)
  → 의존성 배열이 바뀌면 새로 함수를 생성하고, 그렇지 않으면 기존 함수를 재사용

⚠️ 함수 재생성이 문제가 되는 경우

React에서는 컴포넌트가 리렌더링될 때 함수도 다시 생성된다.
이는 보통 문제가 되지 않지만, 다음과 같은 경우에는 성능 이슈로 이어질 수 있다.

• props로 함수를 넘길 때 → 자식 컴포넌트가 불필요하게 리렌더링됨
• useEffect, useMemo, React.memo 등에서 의존성으로 쓰일 때
• 렌더링 비용이 큰 컴포넌트에서 동일한 함수가 자주 만들어질 때

📍 언제 사용하는 게 좋을까?

• 모든 함수에 일괄 적용할 필요는 없다.
• 다음과 같은 조건이 동시에 만족될 때 사용 고려
  1. 함수가 자주 리렌더링되며
  2. 그 함수가 자식 컴포넌트에 전달되거나,
  3. 효율적인 비교(ex: React.memo)가 필요한 경우

✅ 일반적으로는 "너무 일찍 최적화하지 말라"는 원칙이 유효
먼저 기능을 완성하고, 성능 문제를 느끼는 시점에서 적용하는 것이 좋다.

📚 정리

• useCallback은 함수 버전의 useMemo
• 의존성이 바뀌지 않으면 함수가 재생성되지 않음
• React.memo와 함께 사용하면 리렌더링 최적화에 효과적
• 하지만 과도한 사용은 코드 복잡도 증가 및 성능 저하를 유발할 수 있음