useMemo란?
useMemo는 useCallback과 비슷하다. memoized callback을 리턴하는 대신, memoized value를 리턴한다.
useMemo는 2개의 arguments(함수, 의존성 배열)를 갖는다.
매 렌더시, 의존성배열의 값에 아무런 변화가 없다면 useMemo는 첫번째 argument인 expensive function을 재실행하는 것 없이 memoized value를 리턴한다.
말 그대로, useMemo는 매번 렌더할 때마다 expensive function을 다시계산할 필요가 없기에 퍼포먼스 최적화를 위한 Hook이라고 볼 수 있다.
import React, {useMemo} from 'react';
const memoizedValue=useMemo(
()=> computeExpensiveValue(a,b),//1st arg:some function
[a,b] //2nd arg:array of dependencies
);useMemo는 언제 사용해야 하는가?
useMemo는 퍼포먼스 최적화를 위한 Hook이기에 다른 함수 또는 변수에도 사용하고 싶을 수 있겠지만, useMemo를 너무 많이 사용하게 되면 오히려 성능에 부정적인 영향을 줄 수 있다.
React Docs에 따르면 react는 화면 외 컴포넌트를 위한 메모리 확보를 위해 이전 memoized value를 "잊도록" 선택할 수 있다. 결국, useMemo는 메모리 사용을 하여 앱의 속도를 향상시키게 해준다. 그러므로 useMemo의 사용은 너무 많은 메모리 사용과 더불어 앱을 느리게 만드는 불필요한 결과를 가져다 주기도 한다.
useMemo 사용하는 가장 좋은 방법은 모든 렌더링에서 실행할 필요가 없는 expensive function으로 계산되는 값에 사용하는 것이다.
useMemo는 아래와 같이 사용하는 것이 좋다. Hook내부에서 함수를 작성해주는 것이 아니라 함수는 따로 만들어준다.
const memizedValue = useMemo (
() =>myFunction(someArray),
[someArray]
);
const myFunction =(arr)=>{
arr.map(elem =>{
return elem
})
}위 글은 아래 글을 번역하여 참고했다!
