React - Memoization

 

Memoization

비용이 많이 드는 함수 호출의 결과를 저장하고, 동일한 입력이 발생할 때 캐시된 결과를 반환해서 효율을 높히는 방식이다. 알고리즘할때 DP[] 가 여기에 해당한다.

 

useMemo

 

이 후크는 종속성 중 하나가 변경된 경우에만 메모된 값을 다시 계산하는 특징을 갖고 있어 최적화에 효과적이다.

모든 랜더링에서 비용이 많이 드는 계산을 방지하는데 사용된다.

//사용법
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

 

a와 b가 변경되지 않는 한 후속 랜더링에서 함수를 호출하는 대신 메모된 값을 사용하게 된다.

Props를 통해 많은 계산이 요구될때 useMemo를 사용하게 된다.

import React, { useMemo } from 'react';

// 가중치가 큰 계산을 하는 컴포넌트
const HeavyComputationComponent = ({ number }) => {
  // 이 함수는 복잡한 계산을 수행한다고 가정합니다.
  // 예시로, 여기서는 단순히 숫자에 2를 곱합니다.
  const compute = (n) => {
    console.log('복잡한 계산을 수행 중...');
    return n * 2;
  };

  // useMemo를 사용하여 'number'가 변경될 때만 계산을 수행합니다.
  // 'number'가 같다면, 이전에 계산된 값을 재사용합니다.
  const computedValue = useMemo(() => compute(number), [number]);

  // 계산된 값을 화면에 표시합니다.
  return <div>{computedValue}</div>;
};

export default HeavyComputationComponent;

 

구구단을 우리가 계산할때 표가 존재한다면 표를 보면되지 새롭게  9 * 2 = 18 라는 동작을 실제로 하지 않아도 된다.