[React] useMemo란?

목차

 

 useMemo란 무엇인가?

useMemo는 리렌더링 사이의 계산 결과를 캐시할 수 있는 React 훅이다.

 

const cachedValue = useMemo(calculateValue, dependencies)

컴포넌트  최상단에서 useMemo를 호출하여 리렌더링 사이의 계산 결과를 캐시한다.

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  // ...
}

 

 매개변수

calculateValue

• 캐시하려는 값을 계산하는 함수이다. 이때 함수는 순수함수 여야하며, 인자를 받지 않고, 반드시 어떤 타입이든 값을 반환해야한다.
• React는 초기 렌더링 중에 함수를 호출하고 이후의 렌더링에서는 의존성이 이전 렌더링 이후 변경되지 않았다면 동일한 값을 반환한다.
• 그렇지 않으면 calculateValue를 호출하고 결과를 반환하며, 나중에 사용할 수 있도록 저장한다.

dependencies

• calculateValue 코드 내에서 참조되는 모든 반응형 값들의 목록이다.
• 반응형 값에는 props, state 및 컴포넌트 본문 내에서 직접 선언된 모든 변수와 함수가 포함된다고 한다.

 

반환 값

 초기 렌더링에서 useMemo는 인자 없이 calculateValue를 호출한 결과를 반환한다.

• 이후 렌더링에서는, 의존성이 변경되지 않은 경우에는 마지막 렌더링에서 저장된 값을 반환, 변경된 경우에는 calculateValue를 다시 호출하여 그 결과를 반환한다.

 

 사용하기 좋은 상황

비용이 많이 드는 재계산을 생략해야할 때

 

성능 최적화 목적으로 사용해야 할때