anchors.log()

React Hook – UseMemo 이해하기

React는 컴포넌트 기반의 UI 라이브러리로, 효율적인 렌더링을 위해 다양한 최적화 도구를 제공합니다. 그중 하나가 바로 useMemo입니다. 이번 포스트에서는 useMemo의 특징, 사용 시 주의할 점, 언제 사용하면 좋은지, 그리고 useState, useEffect와의 차이점까지 함께 알아보겠습니다.

1. useMemo란?

useMemo는 React에서 제공하는 훅(Hook)으로, 값을 메모이제이션(Memoization)하여 불필요한 계산을 방지하고 성능을 최적화하는 데 사용됩니다. 컴포넌트가 렌더링될 때마다 동일한 계산을 반복하지 않고, 이전에 계산된 값을 재사용함으로써 성능을 개선합니다.

특징

  1. 메모이제이션(Memoization): 특정 값이 변경되지 않으면 이전에 계산된 값을 재사용합니다.
  2. 의존성 배열(Dependency Array): 특정 값이 변경될 때만 계산을 다시 수행합니다.
  3. 렌더링 최적화: 불필요한 연산을 줄여 컴포넌트의 렌더링 성능을 향상시킵니다.

2. useMemo 사용법

useMemo는 두 개의 인자를 받습니다:

  1. 콜백 함수: 메모이제이션할 값을 반환하는 함수.
  2. 의존성 배열: 값이 변경될 때만 콜백 함수를 다시 실행합니다.

기본 문법

const memoizedValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);
  • computeExpensiveValue(a, b)는 연산 비용이 큰 함수입니다.
  • [a, b]는 의존성 배열로, a나 b가 변경될 때만 computeExpensiveValue가 다시 실행됩니다.

3. 언제 useMemo를 사용해야 할까?

useMemo는 React에서 제공하는 Hook으로, 컴포넌트의 성능 최적화를 위해 사용됩니다. 주로 **비싼 계산(heavy computation)**이나 불필요한 재계산을 방지하기 위해 사용되며, 특정 값이 변경될 때만 계산을 다시 수행하도록 제어합니다.

3.1. 비싼 계산(Heavy Computation)을 최적화할 때

  • 컴포넌트가 렌더링될 때마다 동일한 계산을 반복 수행하는 경우, 계산 비용이 높은 작업은 성능에 영향을 줄 수 있습니다.
  • useMemo를 사용하면 의존성 값이 변경되지 않는 한, 이전에 계산된 값을 재사용하여 불필요한 계산을 방지할 수 있습니다.

3.2. 리렌더링 시 동일한 값을 재사용해야 할 때

  • 컴포넌트가 리렌더링될 때마다 동일한 값을 다시 계산하는 경우, useMemo를 사용해 이전 값을 재사용할 수 있습니다.
  • 예: 필터링된 데이터, 정렬된 배열 등.

3.3. 컴포넌트가 자주 리렌더링될 때

  • 부모 컴포넌트가 리렌더링될 때, 자식 컴포넌트로 전달되는 값이 항상 새로 생성되면 자식 컴포넌트도 불필요하게 리렌더링됩니다.
  • useMemo를 사용해 동일한 값을 메모이제이션하면, 자식 컴포넌트의 불필요한 리렌더링을 방지할 수 있습니다.

4. useMemo 사용 시 주의할 점

  1. 남용하지 말 것:
    • useMemo는 모든 계산에 사용하는 것이 아니라, 연산 비용이 큰 작업에만 사용해야 합니다. 불필요하게 사용하면 오히려 코드 복잡도가 증가하고 성능이 저하될 수 있습니다.
  2. 의존성 배열 관리:
    • 의존성 배열에 포함된 값이 정확하지 않으면, 예상치 못한 동작이 발생할 수 있습니다. 항상 필요한 값을 의존성 배열에 포함하세요.
  3. 메모리 사용:
    • 메모이제이션된 값은 메모리에 저장되므로, 메모리 사용량이 증가할 수 있습니다. 따라서 메모리 사용량과 성능 최적화 간의 균형을 고려해야 합니다.

5. useMemo와 useState, useEffect의 차이점

React의 주요 훅인 useState, useEffect와 useMemo는 각각 다른 목적과 실행 시점을 가지고 있습니다. 아래에서 차이점을 비교해 보겠습니다.

5.1. 실행 시점

  • useState:
    • 컴포넌트가 렌더링될 때 상태를 유지하고, 상태가 변경되면 컴포넌트를 다시 렌더링합니다.
    • 상태 변경은 비동기적으로 처리됩니다.
  • useEffect:
    • 컴포넌트가 렌더링된 이후에 실행됩니다.
    • 주로 DOM 조작, API 호출, 구독/정리 작업 등에 사용됩니다.
  • useMemo:
    • 컴포넌트가 렌더링되는 동안 실행됩니다.
    • 값의 계산을 메모이제이션하여 렌더링 성능을 최적화합니다.

5.2. 주요 목적

  • useState:
    • 컴포넌트의 상태를 관리합니다.
    • 상태가 변경되면 컴포넌트가 다시 렌더링됩니다.
  • useEffect:
    • 컴포넌트의 **부수 효과(Side Effect)**를 처리합니다.
    • 예: 데이터 가져오기, 이벤트 리스너 등록/해제 등.
  • useMemo:
    • 연산 비용이 큰 계산을 메모이제이션하여 불필요한 재계산을 방지합니다.
    • 렌더링 성능 최적화에 초점이 맞춰져 있습니다.

5.3. 의존성 배열

  • useState:
    • 의존성 배열이 없습니다. 상태 변경은 setState를 통해 직접 수행됩니다.
  • useEffect:
    • 의존성 배열을 통해 특정 값이 변경될 때만 부수 효과를 실행합니다.
  • useMemo:
    • 의존성 배열을 통해 특정 값이 변경될 때만 계산을 다시 수행합니다

결론

React의 useMemo는 성능 최적화를 위한 강력한 도구입니다. 하지만 모든 상황에서 사용하는 것이 아니라, 연산 비용이 큰 작업이나 불필요한 렌더링을 방지해야 할 때 적절히 사용하는 것이 중요합니다. 또한, useState와 useEffect와는 실행 시점과 목적이 다르므로, 각 훅의 역할을 명확히 이해하고 적절히 사용하는 것이 중요합니다.

핵심 요약

  • useMemo는 값의 메모이제이션을 통해 불필요한 계산을 방지합니다.
  • useState는 상태 관리, useEffect는 부수 효과 처리, useMemo는 렌더링 성능 최적화에 사용됩니다.
  • 각 훅의 실행 시점과 목적을 이해하고 적절히 활용하세요.

React 프로젝트에서 성능 최적화가 필요하다면, useMemo를 적절히 활용해보세요!

jeewoo jung 아바타

Written by

jeewoo jung

, , ,