[React.js] useMemo 훅

useMemo 훅

들어가며

• 리액트(React.js)의 @useMemo@ 훅에 대해 정리해본다.

 

useMemo 훅

개념

• 컴포넌트의 성능 최적화(Optimization)를 위해 자주 사용되는 훅
• 특정 연산의 결과를 메모이제이션(Memoization)하여 의존성 배열에 있는 값들이 변경되지 않는 한 해당 연산을 다시 수행하지 않도록 한다.
  • 불필요한 재연산을 방지하고 성능을 향상시킬 수 있다.

 

사용 방법

• 첫 번째 인자는 메모이제이션할 값을 반환(return)하는 함수이다. (@computeExpensiveValue@).
• 두 번째 인자는 의존성 배열(Dependency Array)로, 이 배열의 값들이 변경될 때만 메모이제이션된 값이 다시 계산된다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

 

사용해야 할 때

• 무거운 연산(Expensive Computation)이 자주 반복되는 경우
• 리스트를 필터링하거나 정렬하는 작업이 자주 발생할 경우
• (컴포넌트가 불필요하게 리렌더링될 때) 동일한 연산 결과가 계속해서 반복되거나 불필요하게 재연산되는 경우를 방지하고자 할 경우

 

사용 시 주의할 점

• @useMemo@를 불필요하게 사용하면 오히려 성능에 부정적인 영향을 미칠 수 있다.
  • 간단한 값이나 연산은 @useMemo@를 사용하지 않아도 된다.
• 의존성 배열에 있는 값들이 제대로 관리되지 않으면, 원치 않는 리렌더링이나 업데이트 문제를 일으킬 수 있다.

 

사용 예

• @items@ 배열이 변경되지 않으면 @useMemo@가 @filteredItems@를 재계산하지 않도록 하여 성능을 최적화한다.

function MyComponent({ items }) {
  const filteredItems = useMemo(() => {
    return items.filter(item => item.active);
  }, [items]);

  return (
    <div>
      {filteredItems.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

 

참고 사이트

useMemo – React