핵심 답변
📌 useMemo계산된 값을 메모이제이션합니다. 의존성이 바뀌지 않으면 이전에 계산한 값을 재사용합니다.
📌 useCallback함수 자체를 메모이제이션합니다. 자식 컴포넌트에 props로 함수를 전달할 때 불필요한 리렌더링을 방지합니다.
useMemo는
useMemo(() => fn(), deps) 형태로 계산 결과값을 반환useCallback은
useCallback(fn, deps) 형태로 함수 자체를 반환예시 코드
typescript
// useMemo: 비용이 큰 계산 결과 캐싱
const total = useMemo(() => {
return items.reduce((acc, item) => acc + item.price, 0);
}, [items]);
// useCallback: 자식 컴포넌트에 안정적인 함수 전달
const handleClick = useCallback(() => {
setCount(c => c + 1);
}, []); // 의존성이 없으면 함수 재생성 안 됨
// React.memo와 함께 사용할 때 효과적
const Child = React.memo(({ onClick }) => {
return <button onClick={onClick}>+1</button>;
});핵심 용어
📌 메모이제이션(Memoization)동일한 입력에 대해 이전에 계산한 결과를 저장해 재사용하는 최적화 기법입니다.
📌 참조 동일성(Referential Equality)JavaScript에서 객체와 함수는 매 렌더링마다 새로 생성되어 다른 참조를 가집니다. useCallback은 이를 방지합니다.