한 번 계산한 값을 저장해두고,
같은 입력이 다시 들어오면 계산하지 않고 저장된 결과를 반환하는 최적화 기법

사용 이유

이유	설명
⏱ 성능 향상	동일한 연산을 반복하지 않음 → 실행 시간 단축
🔁 반복 방지	동일한 입력에 대해 매번 계산하지 않음
💡 자원 절약	CPU 계산량, 메모리 등 낭비 최소화

사용하는 상황

• 동일한 입력으로 같은 연산이 반복될 때
• 함수 실행에 시간이 오래 걸리거나 리소스를 많이 쓰는 경우
• 사용자 상호작용이 빠르게 이어질 때 (예: 검색 자동완성, 스크롤 중 계산 등)

기본 예시

function slowAdd(a, b) {
  console.log("계산 중...");
  return a + b;
}

slowAdd(3, 5); // → "계산 중...", 8
slowAdd(3, 5); // → "계산 중...", 8 (매번 다시 계산됨)

위 함수는 항상 새로운 연산을 수행해서 성능 낭비가 발생한다.

메모이제이션을 적용하면

const cache = {};

function memoAdd(a, b) {
  const key = `${a},${b}`; // 고유한 키 생성
  if (cache[key]) {
    return cache[key]; // 캐시된 값 반환
  }

  console.log("계산 중...");
  const result = a + b;
  cache[key] = result; // 캐시에 저장
  return result;
}

memoAdd(3, 5); // → "계산 중...", 8
memoAdd(3, 5); // → 바로 8 반환 (계산 안 함)

한 번 계산된 값은 cache 객체에 저장되어, 같은 입력값에 대해 재사용된다.

React와 메모이제이션

유용한 기능인 만큼 리액트에서 ⚛ React에선 useCallback, useMemo, React.memo 등으로 사용이 된다.

상황	메모이제이션 도구	설명
복잡한 계산 값	useMemo	특정 값 계산을 캐싱
콜백 함수 참조 유지	useCallback	함수 재생성 방지 (props 최적화)
컴포넌트 자체 최적화	React.memo	props가 같으면 리렌더링 막기

useCallback

const handleClick = useCallback(() => {
  console.log("클릭됨!");
}, []);

→ handleClick은 컴포넌트가 리렌더링되어도 같은 함수 참조를 유지해서 불필요한 렌더링 방지.

주의할 점

• 캐시가 계속 쌓이면 메모리 누수 위험 존재 → 주기적으로 정리하거나 LRU 캐시처럼 제한 설정 필요
• 캐시 키 설계 주의: 인자가 복잡한 객체/배열일 경우 키 문자열화 주의