useMemo

• useMemo는 리랜더링 사이에 계산 결과를 캐시할 수 있는 React Hook 입니다.

const cachedValue = useMemo(calculateValue, dependencies)

Parameters

• calculateValue
  • 캐시하려는 값을 계산하는 함수입니다. 순수 함수여야 하며, 어떠한 인수도 받지 않아야 합니다.
  • 초기 랜더링 시, 함수를 호출하고, 이후 depnedecies 목록의 변경될 경우 함수를 호출하여 결과를 반환합니다.
  • depnedecies 목록의 변경되지 않은 경우, 동일한 값을 다시 반환합니다.
• dependencies
  • calculateValue코드 내에서 참조되는 모든 relative 값의 목록입니다. relative 값에는 프로퍼티, state, 컴포넌트 본문 내부에서 직접 선언된 모든 변수와 함수가 포함됩니다
  • React는 Object.is 비교 알고리즘을 사용하여 각 의존성을 이전 값과 비교합니다.

Returns ( 반환값 )

• 초기 랜더링에서는 useMemo는 인자 없이 calculateValue을 호출한 결과를 반환합니다.
• depnedecies 목록의 변경될 경우 calculateValue를 다시 호출하여 결과를 반환합니다