React 성능 최적화 3종 세트: useCallback, useMemo, React.memo 알아보기

React는 기본적으로 매우 빠르지만, 프로젝트 규모가 커질수록 사소한 리렌더링도 성능 저하를 불러올 수 있다. 이런 불필요한 렌더링을 방지하고 컴포넌트 성능을 최적화하는 방법으로 다음의 3가지를 흔히 사용하고 있다.

• useCallback
• useMemo
• React.memo

들어는 봤는데...정확히 뭘까?

✅ 1. useCallback: 함수를 메모이제이션하여 불필요한 렌더링 방지

🤔 언제 사용할까?

부모 컴포넌트에서 자식 컴포넌트에 함수를 props로 넘겨줄 때! 매번 새로운 함수가 생성되면 자식 컴포넌트도 리렌더링 되기 때문에 useCallback을 사용해 함수를 캐싱해둘 수 있다.

// 기본 사용법
const memoizedCallback = useCallback(() => {
  // 실행할 함수 내용
}, [dependencies]);

✅ 2. useMemo: 값(결과)을 메모이제이션하여 계산 비용 절감

🤔 언제 사용할까?

계산량이 많은 함수가 리렌더링때마다 매번 실행되면 느려질 수 있다. 이때 useMemo를 사용하면 값을 캐싱해두었다가 필요할 때만 다시 계산해준다.

// 기본 사용법
  const result = useMemo(() => {
    console.log("복잡한 계산 실행");
    return fibonacci(num);
  }, [num]);

✅ 3. React.memo: 컴포넌트를 메모이제이션하여 불필요한 렌더링 방지

🤔 언제 사용할까?

부모가 리렌더링되더라도 props가 변하지 않는다면 자식 컴포넌트는 리렌더링되지 않게 할수 있다.

const Child = React.memo(({ name }: { name: string }) => {
  console.log("Child 렌더링");
  return <div>안녕, {name}</div>;
});

⚠️ 주의할 점

과도한 최적화는 오히려 독이 될 수 있다. 불필요한 useMemo나 useCallback 사용은 오히려 성능을 저하시킬 수도 있다! 또한, 사용할때 의존성 배열 관리에 주의해야한다.

⭐️⭐️⭐️
React19에서 React Compiler가 도입되면서 useCallback, useMemo없이 자동으로 의존성을 추적해 메모이제이션 해주는 기능이 생겼습니다.
자동으로 불필요한 렌더링 방지를 해준다니...그러나! React Compiler가 모든 경우에 100% 정확한 메모이제이션을 보장하진 않으므로 복잡한 연산 등에는 수동으로 써주는게 안전할 수도 있다고 합니다