[React] useMemo

설명

성능 최적화를 위하여 기존에 수행한 연산결과를 재사용할 수 있도록 하는 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]);

links

social