메모이제이션

계산 결과를 저장해두고 재사용하는 것입니다.

예시

// 메모이제이션 없음
function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

fibonacci(40);  // 매우 느림 (같은 계산 반복)

// 메모이제이션 있음
const cache = {};

function fibonacci(n) {
    if (n <= 1) return n;
    if (cache[n]) return cache[n];  // 저장된 값 반환

    cache[n] = fibonacci(n - 1) + fibonacci(n - 2);
    return cache[n];
}

fibonacci(40);  // 빠름 (계산 결과 재사용)

React에서

// 값 캐싱
const total = useMemo(() => items.reduce((a, b) => a + b, 0), [items]);

// 함수 캐싱
const handleClick = useCallback(() => console.log('click'), []);

핵심

같은 입력 → 같은 결과

이미 계산한 적 있으면 다시 계산 안 하고 저장된 값 반환