분류 Reactjs

useMemo React Hook 사용법

컨텐츠 정보

  • 조회 469 (작성일 )

본문

useMemo React hook이 유용한 지, 어떻게 사용하는지 알아보십시오!


내가 사용하는 하나의 React hook은 useMemo입니다.


import React, { useMemo } from 'react'


이 후크는 메모 값을 만드는 데 사용됩니다.


이 후크는 useCallback과 매우 유사합니다. 차이점은 useCallback이 메모 콜백을 반환하고 useMemo가 해당 함수 호출의 결과인 메모 값을 반환한다는 것입니다. 사용 사례도 다릅니다. useCallback은 자식 구성 요소에 전달 된 콜백에 사용됩니다. 


복잡한 계산을 하거나 값 비싼 쿼리를 만들기 위해 데이터베이스에 도달하거나 네트워크에 값을 계산해야 하는 경우가 있습니다.


이 후크를 사용하면 이 작업은 한 번만 수행 된 다음 값이 메모 값에 저장되고 다음에 참조 할 때 훨씬 빨라집니다.


사용법은 다음과 같습니다.


const memoizedValue = useMemo(() => expensiveOperation())


빈 배열을 useMemo()의 두 번째 매개 변수로 추가하십시오. 그렇지 않으면 아무런 메모도 발생하지 않습니다.


인수를 전달해야 하는 경우 배열에서 인수를 전달해야 합니다.


const memoizedValue = useMemo(() => expensiveOperation(param1, param2), [param1, param2])


값에 액세스하려고 할 때 매개 변수 중 하나가 변경되면 메모값없이 계산됩니다.