useMemo & useCallback

💾 메모이제이션(memoization)

컴퓨터가 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로서 동일한 계산을 하지 않도록 하여, 속도를 높이는 기술

useMemo

메모이제이션된 '값'을 반환하는 hook

• 용법

useMemo(() => fn, [dependency])

useMemo는 dependency 가 변한다면, () => fn이라는 함수를 실행하고, 그 함수의 반환 값을 반환합니다.
또한 dependency 값이 변할 때만 함수를 재실행합니다. 이를 통해 매 렌더링 할 때마다 소요되는 불필요한 계산을 피할 수 있습니다. 만약 dependency 인자를 전달하지 않는다면 매번 새롭게 계산하여 return 합니다.

useCallback

메모이제이션된 '함수'를 반환하는 hook

• 용법

useCallback(fn, [dependency])

useCallback 은 dependency 가 변한다면, fn이라는 새로운 함수를 반환합니다.

정리

• 공통점
  useMemo, useCallback은 모두 불필요한 렌더링 또는 연산을 제어하는 용도로 성능 최적화에 그 목적이 있습니다.

• 차이점
  useMemo는 함수의 연산량이 많을때 이전 결과값을 재사용하는 목적이고, useCallback은 함수가 재생성 되는것을 방지하기 위한 목적이 있습니다.