메모이제이션(memoization)이란 무엇이며 어떻게 구현하나요?

Question

Accepted Answer

**메모이제이션(memoization)**은 함수의 결과를 인수를 키로 하여 캐싱하므로, 같은 입력으로 반복 호출하면 다시 계산하는 대신 캐시된 결과를 즉시 반환합니다. **메모리를 속도와 맞바꾸는** 것이며, **순수(pure)** 함수에만 동작합니다(같은 입력 → 같은 출력, 부수 효과 없음).

## 범용 memoize 래퍼

```js
function memoize(fn) {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args); // 인수로부터 캐시 키 생성
    if (cache.has(key)) {
      return cache.get(key);          // 캐시 히트 — 작업 건너뜀
    }
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}

const slowSquare = n => { /* 비용이 큼 */ return n * n; };
const fastSquare = memoize(slowSquare);
fastSquare(4); // 계산 → 16
fastSquare(4); // 캐시 → 16 즉시
```

## 고전적 성공 사례: 재귀 피보나치

```js
const fib = memoize(n => (n < 2 ? n : fib(n - 1) + fib(n - 2)));
// 부분 문제를 캐싱하여 지수 시간 O(2^n)을 대략 O(n)으로 바꾼다
```

## 트레이드오프와 주의점

- **캐시 키 전략**: `JSON.stringify`는 함수에 대해 실패하고, 객체의 경우 키 순서가 중요합니다. 객체 인수의 경우, (참조를 키로 하는) `WeakMap`이 메모리 누수를 피합니다.
- **무한정 증가**: 캐시는 절대 줄어들지 않습니다 — 장시간 실행되는 프로세스에는 **LRU** 캐시를 사용하세요.
- 재계산이 정말로 비싸고 입력이 반복될 때만 메모이제이션하세요.

## 왜 중요한가

메모이제이션은 어디에나 있습니다: React의 `useMemo`/`React.memo`, Reselect 셀렉터, 동적 프로그래밍.

개념(순수 결과를 입력으로 캐싱)은 동일하며, 핵심 기술은 키를 선택하고 캐시를 제한하는 것입니다.