[React] useMemo

useMemo

React에서 제공하는 훅(Hook) 중 하나로,
계산 비용이 많은 연산 결과를 메모이제이션하여 불필요한 연산을 방지하는 데 사용된다.

즉, 연산에 필요한 피연산자의 값이 변경되면 그때만 연산을 다시한다.

const memoizedValue = useMemo(() => {
  let computedValue = 0;
  ...
  // 계산 비용이 많은 연산
  return computedValue;
}, [dependency]);

만약 의존성 배열이 비어있다면
메모제이션 된 값은 컴포넌트의 생명주기 동안 한번만 계산되고
재사용된다.

하지만 메모이제이션은 계산 비용을 줄이기 위한 기법이지만
메모리를 더 사용한다.

따라서 모든 결과값을 메모제이션하는 것은 좋지 않다.
고비용의 연산에서만 사용하는 것이 좋다.