[Hook] useMemo, useCallback

useMemo와 useCallback은 불필요한 렌더링 및 연산 비용을 줄이기 위해 사용하는 리액트의 최적화 훅이지만,

사용하는 목적과 반환값이 다르다.

---

🔹 useMemo

📌 개념

• 값(value)을 메모이제이션(memoization)하는 훅
• 계산 비용이 큰 연산 결과를 재사용하기 위해 사용
• 의존성 배열(deps)이 변경될 때만 다시 계산

📌 문법

const memoizedValue = useMemo(() => { 
	return computeHeavy(value); 
}, [value]);

📌 언제 사용?

• 계산 비용이 큰 함수 실행 결과를 저장하고 싶을 때
• 렌더링마다 재계산되면 비효율적일 때

📌 예시

const sum = useMemo(() => {
  console.log("계산중...");
  return numbers.reduce((a, b) => a + b, 0);
}, [numbers]);

➡️  numbers가 바뀌지 않는 한 재계산되지 않음.

---

🔹 useCallback

📌 개념

• 함수(function)를 메모이제이션하는 훅
• 동일한 함수를 유지해야 할 때 사용

📌 문법

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

📌 언제 사용?

• 자식 컴포넌트에 함수를 props로 넘겨줄 때
• 렌더링마다 새 함수가 생성되어 불필요하게 자식 컴포넌트가 렌더링될 때 방지

📌 예시

const handleClick = useCallback(() => {
  setCount(prev => prev + 1);
}, []);

 

---

🔥 차이점 요약 (한눈에 보기)

Hook	메모이제이션 대상	반환값	사용 시점
useMemo	값 (연산 결과)	결과값	계산 비용이 큰 연산 최적화
useCallback	함수	함수	props로 전달하는 함수의 재생성 방지

---

💬 이해하기 쉽게 비유

Hook	비유
useMemo	계산이 오래 걸리는 요리 → 만들어두고 재사용
useCallback	동일한 요리 레시피(함수) → 매번 종이 새로 쓰지 않고 저장해둔 레시피 사용

---

⚠️ 주의할 점

• 두 훅 모두 남발하면 오히려 성능이 나빠질 수 있음
• 계산/함수 재사용에 "비용이 큰 경우"에만 사용
• props로 넘기는 콜백 때문에 자식 컴포넌트가 자주 렌더링될 때 특히 효과적

---

🚀 핵심 정리

useMemo는 값을 캐싱,
useCallback은 함수를 캐싱한다.

둘 모두 성능 최적화가 필요할 때만 선택적으로 사용하는 훅이다.