useCallback, React.memo, useMemo는 리액트에서 불필요한 리렌더링을 줄여 성능을 최적화하기 위한 대표적인 도구입니다. 각각의 목적과 사용하는 이유를 아래와 같이 정리할 수 있습니다.

✅ 공통 목표: 불필요한 리렌더링 줄이기

리액트 컴포넌트는 상위 컴포넌트가 리렌더링되면 자식 컴포넌트도 기본적으로 리렌더링됩니다. 하지만 값이 바뀌지 않았는데도 매번 렌더링하면 성능 낭비가 생깁니다.

이 문제를 해결하기 위해 useCallback, useMemo, React.memo를 사용합니다.

🔹 1. React.memo – 컴포넌트 리렌더링 막기

// components/ExpensiveComponent.tsx
import React from 'react';

type Props = {
  value: number;
};

const ExpensiveComponent = ({ value }: Props) => {
  console.log('👀 렌더링됨:', value);
  return <div>{value}</div>;
};

// React.memo를 쓰면 props가 변경되지 않는 한 다시 렌더링되지 않음
export default React.memo(ExpensiveComponent);

💡 사용 이유

• 부모가 리렌더링되더라도 props가 같으면 자식 컴포넌트는 리렌더링 안 됨
• === 비교로 shallow compare(얕은 비교)만 하기 때문에, props가 참조형이면 주의 필요

🔹 2. useCallback – 함수 재생성 방지

// App.tsx
import React, { useCallback, useState } from 'react';
import ExpensiveComponent from './components/ExpensiveComponent';

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

  // 이 함수는 count가 변경되지 않는 한, 같은 참조를 유지함
  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

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

export default App;

💡 사용 이유

• 자식 컴포넌트에 콜백 함수를 props로 전달할 때,
• 함수가 매 렌더마다 새로 만들어지면 → 자식 컴포넌트는 계속 리렌더됨
• useCallback을 쓰면 같은 함수 참조를 유지할 수 있음