useMemo를 사용하면 정말로 성능이 좋아질까?

React에서 useMemo를 사용하는 상황은 보통 성능 개선을 위해 사용합니다. 그렇다면 사용하면 무조건 성능이 좋아질까요? 본 글에서는 useMemo를 사용하면 정말로 성능이 향상이 있는지 설명합니다.

 

useMemo()란?

useMemo는 React에서 제공하는 훅(Hook) 중 하나로, 메모이제이션(memoization)을 통해 성능 최적화를 돕는 역할을 합니다.

 

컴포넌트의 렌더링 과정에서 계산 비용이 높은 결과 값을 메모리에 캐싱하게 됩니다. 이후 동일한 입력 값이 들어오더라도 재연산하지 않고, 메모리에 캐싱된 값을 반환하기 때문에 불필요한 연산을 줄어들어 성능이 향상될 수 있습니다.

 

useMemo() 사용 예시

계산 비용이 높은 연산의 경우, useMemo를 사용하여 메모리 캐싱을 합니다. 의존성 배열(dependency array)에 someProp이 변경되는 것이 아니면, (someExpensiveFunction() 을) 다시 연산하지 않습니다

import React, { useMemo } from 'react';

const MyComponent = ({ someProp }) => {

  const computedValue = useMemo(() => {
    // 계산 비용이 높은 함수
    return someExpensiveFunction(someProp);
  }, [someProp]);

  return <div>결과 값: {computedValue}</div>;
};

 

useMemo를 사용하면 무조건 성능이 좋아질까?

그렇다면, useMemo를 사용했을 때 무조건 성능이 좋아질까요? 대답은 NO입니다.

 

다음 예시와 같이 너무 간단한 연산 그리고 값이 자주 변경되는 경우, 오히려 성능이 나빠질 수도 있습니다.

 

값이 자주 변경되고 계산 비용이 낮은 예시 코드

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

function ExampleComponent() {
  const [count, setCount] = useState<number>(0);

  const doubled = useMemo(() => {
    return count * 2; // 단순히 값을 2배로 연산함
  }, [count]);

  // 버튼을 클릭할때마다 값이 올라가고, 값이 자주 바뀜
  return (
    <div>
      <p>2배수: {doubled}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

 

위의 예시에서 useMemo는 count 값이 변경될 때마다 count * 2 계산을 메모이제이션합니다. 하지만 계산 비용이 매우 낮고, 값이 자주 변경 되기 때문에, 오히려 메모이제이션에 드는 오버헤드(메모리 사용 및 의존성 비교 비용)만 증가하게 됩니다.

 

언제 useMemo가 유용한가?

비싼 계산 (Expensive Calculation) 계산 비용이 높은 연산이 있고, 의존하는 값이 자주 바뀌지 않아 재연산할 필요가 없을 때 사용하면 좋습니다.