[React] useMemo를 기억해보자

💡 useMemo란 ?

useMemo는 리액트의 성능 최적화를 위한 훅 중 하나로, 계산 비용이 많이 드는 연산의 결과를 메모이제이션(memoization)하여, 불필요한 재계산을 방지합니다. 즉, 특정 값이 변경되지 않으면 이전에 계산한 값을 재사용함으로써 성능을 향상시킬 수 있습니다.

메모이제이션(memoization) : 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

언제 사용하나요?

• 연산 비용이 큰 작업을 할 때: 복잡한 계산을 매번 렌더링할 때마다 수행하지 않고, 의존하는 값이 변경될 때만 계산하도록 할 수 있습니다.
• 렌더링 성능을 개선하고자 할 때: 자식 컴포넌트에 전달하는 값이 자주 변경되지 않는다면, 불필요한 재렌더링을 방지하기 위해 사용할 수 있습니다.

기본 문법

const memoizedValue = useMemo(() => {
  return expensiveComputation(a, b);
}, [a, b]);

• 첫 번째 인자는 계산할 함수입니다.
• 두 번째 인자는 의존성 배열로, 배열에 포함된 값이 변경될 때만 첫 번째 인자로 전달한 함수가 실행됩니다.

예시

import React, { useMemo } from 'react';

function ExpensiveComponent({ num }) {
  const factorial = (n) => {
    console.log("Calculating factorial...");
    return n <= 1 ? 1 : n * factorial(n - 1);
  };

  const memoizedFactorial = useMemo(() => factorial(num), [num]);

  return (
    <div>
      <h2>Factorial of {num} is: {memoizedFactorial}</h2>
    </div>
  );
}

이 예시에서는 num 값이 변경될 때만 factorial 함수가 다시 실행되고, 그렇지 않으면 이전에 계산한 값이 재사용됩니다.

---

✅ 참고

• React_reference
• sohyeon kim의 velog
• James의 velog
• 소플의 처음만난 리액트(이인제, 한빛미디어)