• 정의
• 사용 방법
• 특징

정의

<aside> 💡 useMemo is a React Hook that lets you cache the result of a calculation between re-renders.

</aside>

<aside> 🦜 useMemo는 리액트 훅으로 리렌더 간에 계산 결과를 캐시할 수 있습니다.

</aside>

• Memoization

  : 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법

• useMemo는 메모이제이션 된 값을 반환한다.

사용 방법

useMemo(() => fn, [dep])

useMemo 내부에 실행할 function을 대입하고, 실행 여부를 판단하는 dependency를 넣는다.

import { useMemo } from 'react';

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

useMemo에 넘겨주는 두 가지 인자 :