React - useMemo 이용해서 성능 최적화 하기

useMemo란?

useMemo는 리액트 훅 중의 하나입니다.

Memoization
메모이제이션. 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술.

리액트에서 재 렌더링 될때 마다,

계산된 값을 캐시로 가지고 있기 때문에 동일한 계산을 반복하지 않고

이전 캐시된 값을 사용하여 성능 향상을 시킬 수 있습니다.

 

계산비용이 높거나, 컴포넌트가 불필요하게 자주 렌더링 되는 경우에 사용하면 좋습니다.

useMemo 사용법

 

useMemo(calculateValue, dependency)

파라미터

• caculateValue
  • 계산하려는 값을 반환하는 함수 입니다. 반드시 return 값이 있어야 합니다.
• dependecy
  • props, state 등 반응형 값들의 목록 입니다.

useMemo 사용시 주의 사항

1. useMemo는 컴포넌트 최상단에서 만들어서 사용하는 것이 좋습니다.

function Counter({ num }) {
   const sum = useMemo(() => {
      return num + 10;
   }, [num])
   
   return <span>{num}</span>
}

2. 반복문과 조건문 사이에서는 사용하지 않습니다. 혹시 필요하다면, 컴포넌트로 분리해서 새롭게 만듭니다.