React최적화: useMemo 고비용 함수 처리 최적화

만약 함수가 매우 간단하고 저비용이라면,

useMemo를 사용하는 것은 성능 향상에 별다른 이점을 가져다주지 않을 수 있습니다.
불필요한 오버헤드를 추가하는 것이 오히려 시스템의 성능을 저하시킬 수 있습니다.
무조건 최소화 할 필요는 없습니다.

---

함수가 동일한 매개 변수로 여러 번 호출되면, 결과를 캐시하려는 목적으로 useMemo 훅을 사용할 수 있습니다.

useMemo 훅은 특정 입력에 대한 메모이제이션된 값을 반환하는 메모이제이션 훅입니다.

따라서 useMemo를 사용하여 이전 호출의 결과를 기억하면, 같은 입력에 대해 다시 계산할 필요가 없습니다.

const getLowestPrice = useMemo(
  () =>
    (List: ListObject[]): number => {
      const priceArray: number[] = List.map(
        (product) => product.price,
      );
      const lowestPrice = Math.min(...priceArray);
      return lowestPrice;
    },
  []
);

 

이렇게 하면 getLowestPrice 함수의 결과가 memoization되고, 다시 계산하지 않아도 됩니다.

useMemo 훅의 두 번째 인수로 빈 배열을 전달하면 메모이제이션된 값은 컴포넌트 렌더링 동안 변경되지 않는 것으로 간주됩니다.

---

useMemo는 다음과 같은 형식으로 사용합니다.

const memoizedValue = useMemo(() => {
  // calculate the value
  return value;
}, [dependency]);

첫 번째 인자로 전달하는 콜백 함수는 메모이제이션 할 값을 반환하는 함수입니다.

두 번째 인자로 전달하는 배열은 메모이제이션 값을 새로 계산해야 할 때의 의존성 목록입니다.

배열 내의 값이 변경되면 콜백 함수가 다시 호출되고, 변경되지 않았다면 이전에 계산한 값을 재사용합니다.

useMemo는 다음과 같은 상황에서 사용할 수 있습니다.

• 계산 비용이 많이 드는 함수의 반환 값을 메모이제이션할 때
• 복잡한 계산을 수행하는 함수의 반환 값을 재사용해야 할 때
• 렌더링할 때마다 계산하지 않고 이전에 계산한 값을 재사용해야 할 때

예를 들어, 아래 코드에서는 calculateExpensiveValue 함수의 계산 결과를 useMemo를 사용하여 메모이제이션하고 있습니다.

import React, { useMemo, useState } from 'react';

const MyComponent = () => {
  const [inputValue, setInputValue] = useState('');
  
  const calculateExpensiveValue = (value) => {
    // Do some expensive calculation with value
    return result;
  };
  
  const memoizedValue = useMemo(() => {
    return calculateExpensiveValue(inputValue);
  }, [inputValue]);

  return (
    <div>
      <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
      <p>Result: {memoizedValue}</p>
    </div>
  );
};

여기서 inputValue가 변경될 때마다 calculateExpensiveValue 함수가 실행되지 않고,

변경되지 않았을 경우 이전에 계산한 값을 재사용합니다.

이렇게 함으로써, 계산 비용이 많이 드는 함수의 결과를 캐시하고 성능을 향상시킬 수 있습니다.

 

 

읽어보면 좋은 글

React useMemo, useCallback의 사용 이유와 사용법

https://velog.io/@vvsogi/React-useMemo-useCallback%EC%9D%98-%EC%82%AC%EC%9A%A9-%EC%9D%B4%EC%9C%A0%EC%99%80-%EC%82%AC%EC%9A%A9%EB%B2%95

React useMemo, useCallback의 사용 이유와 사용법