메모이제이션

 

 

 

메모이제이션(Memoization)은 컴퓨터 프로그래밍에서 함수의 호출 결과를 캐시하고,

동일한 입력값으로 함수가 다시 호출될 때 캐시된 결과를 반환하여 연산의 반복을 줄이는 최적화 기술이다

이 방식은 특히 계산 비용이 높거나 반복 호출이 잦은 함수에 대해 성능을 크게 향상시킬 수 있다

메모이제이션은 순수 함수(pure function)에 가장 적합한 기법이다

순수 함수는 동일한 인자에 대해 항상 같은 결과를 반환하며,

외부 상태에 의존하지 않고, 부작용(side-effect)을 일으키지 않는 함수다

 

작동 원리

메모이제이션을 사용할 때,

함수는 첫 호출 시 그 결과를 내부 캐시(보통은 자료구조, 예를 들어 해시 테이블)에 저장한다

이후 동일한 인자로 함수가 호출되면,

함수는 새로운 계산을 수행하는 대신 캐시에서 결과를 꺼내 반환한다

 

JavaScript에서의 메모이제이션 예시

메모이제이션을 직접 구현할 수 있지만,

많은 JavaScript 라이브러리와 프레임워크에서는 이미 메모이제이션을 쉽게 적용할 수 있는 유틸리티를 제공한다

다음은 메모이제이션을 사용한 간단한 예시다

 

function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = args.toString();
    if (key in cache) {
      return cache[key];
    } else {
      const result = fn.apply(this, args);
      cache[key] = result;
      return result;
    }
  };
}

// 메모이제이션을 적용할 함수 예시
function add(a, b) {
  return a + b;
}

// 메모이제이션 함수 적용
const memoizedAdd = memoize(add);

console.log(memoizedAdd(10, 20)); // 계산을 수행하고 결과를 캐시
console.log(memoizedAdd(10, 20)); // 캐시된 결과를 반환

 

React에서의 메모이제이션

React에서는 useMemo와 useCallback 훅을 통해 컴포넌트 내에서 메모이제이션을 쉽게 적용할 수 있다

useMemo는 계산된 값을 메모이제이션하는 데 사용되고, useCallback은 함수 자체를 메모이제이션하는 데 사용된다

이는 불필요한 리렌더링을 방지하고, 애플리케이션의 성능을 향상시키는 데 도움이 된다

메모이제이션은 성능 최적화를 위한 강력한 도구이지만, 모든 경우에 사용해야 하는 것은 아니다

캐시 관리에는 추가적인 자원이 사용되므로, 실제로 성능 병목이 발생하는 경우에 적절히 적용하는 것이 중요하다