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로 캐싱하면 성능이 좋아집니다.
📚 함께 보면 좋은 공식 리소스
✅ 마무리
useMemo와 useCallback은 React 성능 최적화에서 중요한 도구입니다.
하지만 과도하게 쓰는 건 오히려 독이 될 수 있어요.
정말 성능 이슈가 생겼을 때,
무엇이 문제인지 확인하고 적용하는 습관을 가지세요.
다음 글에서는 React.memo와 useMemo의 조합, 렌더링 최적화 전략을 좀 더 실전적으로 다뤄보겠습니다 😊