React useMemo & useCallback 완벽 이해: 언제, 왜, 어떻게 사용하는가

🚀 React useMemo & useCallback 완벽 이해: 언제, 왜, 어떻게 사용하는가

React 개발을 하다 보면 컴포넌트 리렌더링이 예상보다 많이 발생하거나, 렌더링 성능이 떨어지는 경우가 있어요.

그럴 때 등장하는 것이 useMemo와 useCallback입니다.

하지만 이 훅들은 초보자에겐 다소 추상적으로 느껴질 수 있습니다. 이 글에서는 이 두 훅을 명확히 구분하고, 언제 쓰는지, 왜 쓰는지, 어떻게 쓰는지를 실전 예제와 함께 정리해볼게요.

---

📌 useMemo란?

useMemo는 계산된 값을 메모이제이션(기억)하여 불필요한 계산을 방지하는 훅입니다.

const memoizedValue = useMemo(() => {
  return 복잡한계산(값);
}, [값]);

즉, 의존성 배열 값이 바뀌지 않으면 기존 결과를 그대로 재사용해요.

✅ 예시: 무거운 연산 캐싱

const heavyComputation = (num) => {
  console.log("무거운 연산 실행");
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += num;
  }
  return result;
};

function MyComponent({ input }) {
  const computed = useMemo(() => heavyComputation(input), [input]);

  return <div>결과: {computed}</div>;
}

→ input 값이 바뀌지 않으면 계산 함수를 다시 실행하지 않고, 이전 값을 재사용합니다.

---

📌 useCallback이란?

useCallback은 함수 자체를 메모이제이션하는 훅입니다.

const memoizedFn = useCallback(() => {
  // 함수 내용
}, [의존성]);

함수가 리렌더링될 때마다 새로운 참조값(reference)을 갖는 문제를 방지할 수 있어요.

✅ 예시: 자식 컴포넌트에 콜백 전달

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

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

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

→ handleClick 함수는 컴포넌트가 리렌더링되어도 재생성되지 않기 때문에 자식 컴포넌트의 불필요한 렌더링을 막을 수 있습니다.

---

🧠 useMemo vs useCallback 한눈에 정리

항목	useMemo	useCallback
기억하는 대상	계산된 값	함수
용도	무거운 연산 결과 저장	함수 참조값 고정
의존성 배열 필요?	Yes	Yes
사용 예시	계산 결과 캐싱	자식 컴포넌트에 콜백 전달

 

---

⚠️ 실수하기 쉬운 점

1. 무조건 useMemo/useCallback을 쓰면 오히려 느려짐

이 두 훅은 내부적으로 메모리와 의존성 비교 연산이 들어가므로, 불필요하게 사용하면 오히려 성능이 나빠질 수 있어요.

진짜 리렌더링 비용이 크거나, 자식 컴포넌트 리렌더링 최적화가 필요할 때만 사용하세요!

2. 의존성 배열 누락

// ❌ 잘못된 예
const memoizedValue = useMemo(() => compute(data), []);

→ data가 바뀌어도 재계산되지 않습니다. 필요한 의존성은 반드시 포함해야 해요.

---

🔍 실전에서 많이 쓰는 상황

• 자식 컴포넌트에 콜백 전달 → useCallback
• 비싼 계산 (필터링, 정렬, 파싱 등) → useMemo
• React.memo와 함께 사용하여 렌더링 최적화 → useCallback
• 렌더링마다 같은 결과를 반복 계산하지 않게 할 때 → useMemo

예를 들어 쇼핑몰 상품 필터링 기능을 만들 때 필터링된 목록을 useMemo로 캐싱하면 성능이 좋아집니다.

---

📚 함께 보면 좋은 공식 리소스

• React 공식 문서 - useMemo
• React 공식 문서 - useCallback
• Kent C. Dodds 블로그

---

✅ 마무리

useMemo와 useCallback은 React 성능 최적화에서 중요한 도구입니다.
하지만 과도하게 쓰는 건 오히려 독이 될 수 있어요.

정말 성능 이슈가 생겼을 때,
무엇이 문제인지 확인하고 적용하는 습관을 가지세요.

다음 글에서는 React.memo와 useMemo의 조합, 렌더링 최적화 전략을 좀 더 실전적으로 다뤄보겠습니다 😊