Memoization 이란?

캐싱(임시로 저장하는것)된 결과값을 저장해서 같은 input이 들어왔을때 이미 저장된 결과값을 활용하여 프로그램을 가속화 할 수 있는 최적화 방법이다

• Cache : 임시적으로 결과를 저장하는 공간 (한번 수행한 결과를 저장하는 공간)

피보나치 수열

const fib = n => {
  if(n <= 1) return 1
  return fib(n - 1) + fib(n - 2)
}

리턴문 안에서 같은 함수를 호출하는 방식(recursion)으로 같은 연산을 매우 많이 하게 된다
그래서 같은연산의 결과 값은 캐시에 저장해놓고 꺼내오는 방식으로 변경하게 되면 매우 빠른 연산이 가능하다

const fib = (n, memo) => {
  memo = memo || {}
  if(memo[n]) return memo[n]
  
  if(n <= 1) return 1
  return memo[n] = fib(n-1, memo) + fib(n-2, memo)
}

useMemo()

React에서 활용하는 memoization

컴포넌트 내부에서 데이터만 memoization

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
a,b 값이 변했을 때만 computExpensiveValue 함수를 호출해서 반환한다

컴포넌트 전체를 memoization

React.memo() : react에서 제공하는 기본 함수
const MyComponent = React.memo(function MyComponent(props){});
컴포넌트의 props가 변경이 있을때만 컴포넌트를 re-render 해준다