[React] UseMemo란?

리액트 useMemo란?

useMemo는 리액트에서 제공하는 훅(Hook) 중 하나로, 컴포넌트의 성능을 최적화하기 위해 사용됩니다.
주로 계산 비용이 높은 연산의 결과를 저장하고 재사용하거나, 객체/배열 등 참조형 데이터의 동일성 유지가 필요할 때 활용합니다.
복잡하거나 무거운 연산을 매 렌더링마다 반복하고 싶지 않을 때, 그리고 객체, 배열, 함수 등의 참조값이 매번 새로 만들어져서 불필요한 렌더링이 발생할 때 사용할 수 있습니다.

---

기본 문법

const memoizedValue = useMemo(() => {
  // 계산이 많이 드는 함수 실행 또는 객체/배열 생성
  return expensiveFunction(a, b);
}, [a, b]);

• 첫 번째 인자: 메모이제이션할 함수(콜백). 이 함수의 반환값이 저장됩니다.
• 두 번째 인자: 의존성 배열. 배열 안의 값이 바뀔 때만 첫 번째 함수가 다시 실행되어 값을 갱신합니다. 값이 바뀌지 않으면 이전에 저장한 값을 재사용합니다.

예시

계산 비용이 높은 함수의 결과 저장

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

function ExpensiveComponent() {
  const [count, setCount] = useState(0);

  // 비용이 많이 드는 함수
  const expensiveCalculation = (num) => {
    console.log('Calculating...');
    return num * 2; // 실제로는 더 복잡한 연산이라고 가정
  };

  // useMemo로 결과 저장
  const calculatedValue = useMemo(
    () => expensiveCalculation(count),
    [count]
  );

  return (
    <div>
      <p>Count: {count}</p>
      <p>Calculated Value: {calculatedValue}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

• count가 바뀔 때만 expensiveCalculation이 실행되고, 그렇지 않으면 이전 결과를 재사용합니다.

참조 동일성 유지(불필요한 렌더링 방지)

const memoizedObject = useMemo(() => ({ a: 1, b: 2 }), []);

• 빈 배열([])을 의존성으로 넣으면 컴포넌트가 처음 마운트될 때 한 번만 실행되고, 이후에는 같은 객체 참조가 유지됩니다.
• 이 패턴은 자식 컴포넌트에 객체/배열을 props로 넘길 때 불필요한 렌더링을 막는 데 유용합니다.

---

정리

• useMemo는 값(연산 결과, 객체, 배열 등)을 메모이제이션하여, 의존성 배열의 값이 바뀔 때만 다시 계산합니다.
• 주로 비용이 큰 연산의 최적화 또는 참조 동일성 유지가 필요할 때 사용합니다.
• 의존성 배열을 올바르게 설정하는 것이 중요합니다. 잘못 설정하면 값이 갱신되지 않거나, 불필요한 계산이 반복될 수 있습니다.

useMemo를 적절히 활용하면 리액트 앱의 불필요한 연산과 렌더링을 줄여 성능을 최적화할 수 있습니다.