[React] useCallback 🆚 useMemo 🆚 React.memo

useCallback 🆚 useMemo 🆚 React.memo

📊 React 최적화 도구 비교 요약

항목	useCallback	useMemo	React.memo
목적	함수 재생성 방지	값 재계산 방지	컴포넌트 리렌더링 방지
리턴 타입	함수	값(데이터)	컴포넌트 (고차 컴포넌트 반환)
주 용도	콜백 함수를 자식에 전달할 때	계산 비용이 큰 연산 결과를 캐싱할 때	props가 같으면 리렌더링 막기
동작 방식	의존성 배열이 바뀔 때만 함수 새로 생성	의존성 배열이 바뀔 때만 값 다시 계산	props의 얕은 비교 결과가 동일하면 재사용
사용 대상	함수	값 (숫자, 배열, 객체 등)	함수형 컴포넌트
언제 사용하면 좋은가	자식에게 함수를 props로 넘길 때	비용이 큰 계산이 자주 발생할 때	자식 컴포넌트가 불필요하게 리렌더링 될 때
주의 사항	과도한 사용은 오히려 성능 저하	메모리 사용 증가 및 복잡도 증가 가능	props로 객체/배열을 넘길 땐 useMemo 병행 필요

📌 상세 설명

📍 useCallback

💡 어떤 경우 유용한가?

컴포넌트 내에서 만든 함수를 자식 컴포넌트에 props로 넘길 때,
함수가 리렌더링마다 새로 생성되면 자식도 리렌더링됨 → 이를 막기 위해 사용

⚠️ 주의할 점

불필요하게 모든 함수를 감싸면 의존성 추적 및 렌더링 최적화 비용이 오히려 늘 수 있음

📍 useMemo

💡 어떤 경우 유용한가?

연산 비용이 큰 계산이 반복되는 경우 (filter, map, reduce, 복잡한 계산 등)

⚠️ 주의할 점

간단한 값에 대해 남용하면 메모리 낭비, 코드 복잡성만 증가함

📍 React.memo

💡 어떤 경우 유용한가?

자식 컴포넌트가 props가 변하지 않아도 리렌더링 되는 경우 방지

⚠️ 주의할 점

객체나 배열이 props일 경우,
매 렌더링마다 새로운 참조가 생기므로 효과가 없음 → useMemo로 참조값 유지 필요

✅ 세 가지 조합 사용 예시

const Child = React.memo(({ onClick }) => {
  console.log("Child Rendered");
  return <button onClick={onClick}>Click</button>;
});

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

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

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

• Child는 React.memo로 감싸져 있고,
  onClick은 useCallback으로 메모이제이션되어,
  count가 바뀌어도 Child는 리렌더링되지 않음
  → ✨ 세 가지의 최적화 방식이 잘 조합된 예