useMemo : 성능 최적화의 핵심

useMemo란?

useMemo는 React의 성능 최적화 훅으로, 복잡한 계산의 결과를 메모이제이션하여 불필요한 재계산을 방지함.

기본 문법과 작동 원리

const memoizedValue = useMemo(() => {
  // 계산이 복잡한 로직
  return computeExpensiveValue(a, b);
}, [a, b]); // 의존성 배열

• 핵심 메커니즘
  • 의존성 배열에 포함된 값들이 변경될 때만 다시 계산
  • 불필요한 렌더링이나 반복 계산 방지

언제 useMemo를 사용해야 할까?

1. 비용이 큰 계산의 기준
   "비용이 큰 계산"은 주로 다음과 같은 특징을 가짐:
   • 연산 시간이 50ms 이상 소요되는 경우
   • 시간 복잡도가 O(n²) 이상인 알고리즘
   • 대량의 데이터를 순회하는 복잡한 필터링/매핑
   • 재귀적 알고리즘
   • 복잡한 수학적 연산

2. 무거운 계산 결과를 캐싱할 때
   계산 비용이 높은 함수의 결과를 저장하고, 의존성이 변경되지 않았다면 이전 결과를 재사용함.

3. 참조 동일성 유지
   자식 컴포넌트에 props로 전달되는 객체나 배열의 참조가 불필요하게 변경되는 것을 방지함.
   *참조형 타입: 객체, 배열(주소 참조)

const memoizedValue = useMemo(() => {
  return { 
    complex: 'object', 
    that: 'wont change' 
  };
}, []);

// 자식 컴포넌트에 전달
<ChildComponent data={memoizedValue} />

4. 렌더링 성능 최적화
   불필요한 렌더링을 줄이고, 컴포넌트의 성능을 개선함.

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);

  // todos가 변경되지 않으면 필터링 계산을 건너뜀
  const filteredTodos = useMemo(() => {
    return todos.filter(todo => todo.completed);
  }, [todos]);

  return (
    <>
      <TodoList todos={filteredTodos} />
      <Counter count={count} />
    </>
  );
}

주의해야 할 점

1. 무분별한 사용 피하기

• 간단한 계산에는 useMemo 사용 자제
• 오히려 메모이제이션 자체의 오버헤드가 클 수 있음

2. API 호출과 useMemo

• API 호출 자체는 비용이 큰 계산으로 보지 않음
• API 응답 데이터의 복잡한 가공/변환 작업에 유용

// API 응답 데이터의 복잡한 변환
const processedData = useMemo(() => {
  return apiResponse.data.map(item => {
    // 복잡한 데이터 변환 로직
    return heavyTransformationLogic(item);
  });
}, [apiResponse]);

결론

useMemo는 React 성능 최적화의 강력한 도구입니다. 하지만 맹목적인 사용보다는 실제 성능 병목 지점을 정확히 파악하고 적절히 적용하는 것이 중요함