React Hook : useMemo()

React에서 useMemo()는 컴포넌트에서 렌더링할 때 특정 값을 "메모이제이션"하여, 렌더링 성능을 최적화하는 방법 중 하나입니다.

일반적으로, 컴포넌트 내부에서 매번 호출되는 계산량이 큰 함수나 복잡한 연산을 수행하는 함수가 있다면, 매번 렌더링할 때마다 함수가 다시 실행되어 성능에 영향을 줄 수 있습니다.

이때 useMemo()를 사용하면, 함수의 반환값을 메모이제이션하여, 이전에 계산한 결과가 다시 필요할 때는 함수를 재실행하지 않고 이전에 저장된 결과값을 사용할 수 있습니다. 이는 성능 최적화에 도움을 주며, 불필요한 계산을 줄일 수 있습니다.

useMemo()는 다음과 같은 문법으로 사용할 수 있습니다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo()는 두 개의 인자를 받습니다. 첫 번째 인자는 메모이제이션할 함수를 입력하고, 두 번째 인자는 의존성 배열(Dependencies array)을 입력합니다.

의존성 배열은 메모이제이션된 값이 사용되는 값들을 배열 형태로 입력합니다. 이 배열에 있는 값들 중 하나라도 변경되면, 메모이제이션된 값이 다시 계산됩니다. 만약 의존성 배열이 빈 배열([])로 입력되면, 메모이제이션된 값은 컴포넌트가 마운트될 때만 계산됩니다.

다음은 예제 코드입니다. getExpensiveNumber() 함수는 매우 무거운 계산을 수행하는 함수이므로, useMemo()를 사용하여 이전에 계산한 결과를 메모이제이션합니다.

import { useMemo, useState } from 'react';

function getExpensiveNumber(num) {
  // 무거운 계산을 수행하는 함수
  let result = 0;
  for (let i = 0; i < num * 10000000; i++) {
    result += Math.random();
  }
  return result;
}

function MyComponent({ a, b }) {
  const [count, setCount] = useState(0);

  const memoizedValue = useMemo(() => {
    return getExpensiveNumber(count);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Memoized Value: {memoizedValue}</p>
    </div>
  );
}

위 예제에서 getExpensiveNumber()함수는 useMemo()를 사용하여 메모이제이션됩니다. 이 함수count값이 변경될 때마다 호출되며, 이전에 계산된 결과가 존재한다면, 메모이제이션된 값을 반환합니다. 만약 이전에 계산된 결과가 없다면, 새로운 값을 계산합니다. 이를 통해, getExpensiveNumber() 함수의 불필요한 계산을 줄여 성능을 최적화할 수 있습니다.

성능향상해주는 보약? 이라고니 많이 먹으면? 여기저기 모든 함수에 hook으로 도배할까?

useMemo()는 성능 최적화를 위해 많이 사용되는 React Hook 중 하나입니다. 하지만, 모든 경우에 사용하기에는 적합하지 않을 수 있습니다. 예를 들어, 메모이제이션된 값이 자주 변경된다면, useMemo()를 사용해도 성능 최적화 효과가 미미할 수 있습니다.

따라서 useMemo()는 주로 렌더링 성능이 중요한 경우에 사용되며, 컴포넌트 내부에서 매번 호출되는 계산량이 큰 함수나 복잡한 연산을 수행하는 함수를 최적화할 때 효과적입니다.

주의사항

또한, useMemo()를 사용할 때는 의존성 배열을 잘 파악하여 사용해야 합니다. 의존성 배열에 필요하지 않은 값이 들어가면, 메모이제이션된 값이 불필요하게 재계산될 수 있습니다. 반면, 의존성 배열에 필요한 값이 빠져있으면, 메모이제이션된 값이 적절하지 않은 값으로 유지될 수 있습니다.

React 18에서는 useMemo()가 변경되지 않았으며, 여전히 위에서 설명한 방식으로 사용됩니다. 하지만, React 18에서는 useMemo()와 같은 Hook들을 더욱 효율적으로 사용할 수 있는 방법들이 추가될 예정이라고 하며, 이를 통해 더욱 성능 최적화를 할 수 있을 것입니다.

내저장소 바로가기 luxury515