useMemo (typescript) 정리

오늘은 useMemo다.

설명에 앞써 기본 꼴은 이렇다.

const value=React.useMemo(()=>{
	return calculate();
},['의존성 배열'])

기본 꼴을 살펴보면 useMemo는 useEffect와 같이 의존성 배열을 갖는다. 의존성 배열은

의존성 배열이란 useEffect 훅에 입력하는 두 번째 매개변수를 뜻한다. 의존성 배열의 내용이 변경되었을 경우 부수 효과 함수가 실행된다.

라고 한다. useEffect 뿐만 아니라 useMemo에도 역시 의존성 배열을 갖는다. 쉽게 말하면 의존성배열에 안에 있는 값이 변화가 있다면 함수를 다시 실행 시키고, 아닐시엔 실행 시키지 않고 넘어간다. 따라서 의존성 배열의 값에 변화가 없다면 state의 변화가 생겨 Re-render가 일어나도 함수를 다시 실행 시키지 않을 수 있다.

그렇다면 useMemo는 언제 사용해야 하며 장점이 무엇일까?

우선 앞써 말했듯 의존성 배열의 변화가 없으면 Re-render가 발생했을 때 불필요한 함수 실행을 막을 수 있다.

에를 들어 보자

const calculate1 = (num: number): number => {
  for (let i = 0; i < 999999999; i++) {}
  return num+1;
 }//delay
 
 const calculate2 = (num: number): number => {
  return num+1;
 }//not delay

위 코드를 포문 일부러 딜레이를 주기 위해 넣어주었다.

화면 상에 버튼이 두개 있다고 가정을 하자.

하나는 딜레이가 있는 버튼, 하나는 없는 버튼.

//don't useMemo

  //DelayBtnOnClick
  const useNotMemoDelay = delayCal2(delayNumber2);
  
  //NotDelayBtnOnClick
  const useNotMemo = notDelayCal2(notDelayNumber2);

만약 위와 같이 useMemo를 사용하지 않고 딜레이가 없는 함수가 실행하였을때 딜레이 함수도 함께 실행되는 것을 볼 수 있다.

//useMemo

  //DelayBtnOnClick
  const memoDelay = React.useMemo(() => {
    return delayCal1(delayNumber);
  }, [delayNumber]);
  
  //NotDelayBtnOnClick
  const memoNotDelay = notDelayCal1(notDelayNumber);

반면 위와 같이 useMemo를 사용하게 되면 '의존성 배열'의 변화가 없기 때문에 딜레이가 되지않고 실행이 된다.

useMemo를 사용해본 결과 괜찮은 Hooks 같다. 뭐 내가 평가할 그런 실력도 아니고 그렇지만, 좋은 것 같다.

react 특성상 state의 변화가 있을때마다 re-render가 되는데 이때 불필요한 함수의 재샐행을 방지 할 수 있게 되었다.