설명
성능 최적화를 위하여 기존에 수행한 연산결과를 재사용할 수 있도록 하는 Hook
memoization
- 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법
- memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있음
단점
- useMemo가 적용된 레퍼런스는 재활용을 위해서 가바지 컬렉션(garbage collection)에서 제외되기 때문에 메모리를 더 쓰게됨
- useMemo hook 함수를 사용할 일은 생각보다 그렇게 많지 않음
- 수초 이상 걸리는 로직이 프론트앤드(front-end)에 존재하다는 것 자체가 일반적인 앱에서는 흔치 않은 일
- 그렇게 오래 걸리는 로직이 있다고 해도 useEffect hook 함수 등을 이용해서 비동기로 처리하는 방안을 먼저 고려하게 되기 때문
- 꼭 필요하지 않다면 굳이 쓸 필요는 없다.
사용
- 아래의 함수가 굉장히 복잡한 계산과정을 거친다고 가정
- 이전과 같은 파라미터의 경우 함수를 굳이 재 호출할 이유가 없음
- useMemo는 결과값을 메모리 저장해 놓고 쓴다.
const [number01, setNumber01] = useState<number>(10);
const [number02, setNumber02] = useState<number>(20);
const complextFunction = (param01: number, param02: number): number => {
return param01 * Math.SQRT1_2 / param01 * Math.PI + Math.LOG2E;
}
const result = useMemo(() => complextFunction(number01, number02), [number01, number02]);