[React 성능 최적화] 2. useMemo

useMemo

useMemo는 값을 메모이제이션하는 데 사용된다. 특정 계산 비용이 큰 값을 다시 계산하지 않고, 의존성 배열의 값이 변경될 때만 계산하도록 한다.

import React, { useMemo } from 'react';

const ExpensiveComponent = ({ items }) => {
  const total = useMemo(() => {
    console.log('계산 중...');
    return items.reduce((sum, item) => sum + item, 0);
  }, [items]);

  return <div>총합: {total}</div>;
};

언제?

계산 비용이 높은 작업(예: 배열 합산, 정렬, 필터링 등)을 최적화할 때

주의사항

•	불필요하게 사용하는 것은 오히려 성능을 저하시킬 수 있음
•	의존성 배열을 정확히 관리해야 함

useMemo를 사용하지 않아야 하는 경우

useMemo는 계산 비용이 클 때만 유용하다. 다음과 같은 경우에는 사용하지 않는 것이 좋다.

1. 계산 비용이 크지 않을 때
   간단한 산술 연산이나 문자열 조합처럼 계산 비용이 미미한 작업에 useMemo를 사용하는 것은 오히려 불필요한 복잡성을 가져올 수 있다.

2. 값이 자주 변경될 때
   의존성 배열에 포함된 값이 자주 변경되면 useMemo가 매번 다시 실행되며 useMemo를 사용하는 이점이 사라진다.

3. 값이 캐싱될 필요가 없을 때
   값이 즉시 사용되고 다시 참조되지 않는다면 메모이제이션 자체가 불필요하다.