[ React ] useMemo에 대해 알아보자.

참고 사이트

• 리액트 공식 문서 - useMemo

 

 

 

📝 useMemo

useMemo는 재렌더링 간 계산 결과를 *캐시(Cache)할 수 있는 React Hook이다.

비용이 많이 드는 재계산을 건너뛰기 위하여 사용한다.

 

*캐시(Cache): 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 장소로 데이터 접근하는 시간이 오래걸리거나 다시 계산하는 시간을 절약하고 싶은 경우에 사용

출처: Wikipedia

 

반환값을 캐싱하는 것을 메모이제이션(memoization)이라고도 하며, 이것이 이 Hook이 불리는 이유이다.

 

📢 참조

useMemo 재렌더링 간의 계산을 캐시하려면 구성 요소의 최상위 수준에서 호출한다.

const cachedValue = useMemo(calculateValue, [dependencies])

 

📦 Parameters

• calculateValue: 캐시하려는 값을 계산하는 함수이다.

순수해야하고, 인수를 취하지 않아야하며, 모든 유형의 값을 반환해야한다.

React는 초기 렌더링 중 함수를 호출하고, 다음 렌더링에서 dependencies가 변경되지 않은 경우 동일한 값을 반환한다.

 

• dependencies: calculateValue(함수)코드 내부에서 참조되는 모든 반응 값의 목록이다.

반응형 값에는 props, state 및 구성 요소 본체 내부에 직접 선언된 모든 변수와 함수가 포함된다.

 

🎁 Return

초기 렌더링 시 인수 없이 useMemo 호출한 cacluateValue(함수)의 결과를 반환한다.

 

다음 렌더링에서 dependencies가 변경되지 않은 경우 이미 저장된 값을 반환하고, 변경된 경우 calculateValue를 다시 호출하여 반환된 결과를 반환한다.

 

⚠️ 주의사항

• useMemo는 Hook이므로 컴포넌트 최상위 수준 이나 자체 Hook에서만 호출이 가능하다.

• Strict(엄격) 모드에서는 useMemo가 두 번 호출되지만, 프로덕션에 영향을 주지 않는다.

• React는 특별한 이유가 없는 한 캐시된 값을 버리지 않는다.

 

✒️ 사용

• 비용이 많이 드는 재계산 건너뛰기

• 구성요소 리-렌더링 건너뛰기

 

 

... PT 받고 와서  작성할 예정

공식 문서 예시가 길어 구독자분께서 쉽게 이해할 수 있도록 예시를 새로 만들어보고 있습니다.

 

To Be Develop...

 

import React, { useMemo, useRef, useState } from "react";
import "./App.css";

// 연산이 3초 걸리는 함수가 있다고 할 때,
function delayFunc(
  preVal: number,
  target: React.MutableRefObject<HTMLInputElement>
) {
  const startTime = Date.now();
  setTimeout(() => {
    if (target) {
      console.log(Date.now() - startTime);
      target.current.value = (preVal + 1).toString();
    }
  }, 3000);
}

function basicFunc(preVal: number) {
  console.log("빠른 함수 재계산");
  return preVal + 1;
}

export function DelayMemo() {
  const delayInputRef = useRef<React.MutableRefObject<HTMLInputElement> | null>(
    null
  );
  const [value, setValue] = useState<number>(0);
  const [memo, setMemo] = useState<number>(0);

  const basic = basicFunc(value);

  const memoization = useMemo(() => {
    return delayFunc(memo, delayInputRef);
  }, [memo]);

  //   const memoization = delayFunc(memo, delayInputRef);

  return (
    <>
      <div>
        <div>
          value <input value={basic} readOnly />
        </div>{" "}
        <div>
          memoization <input ref={delayInputRef} value={memoization} readOnly />
        </div>
      </div>
      <br />
      <div>
        <button
          onClick={() => {
            setValue((prev) => {
              return prev + 1;
            });
          }}
          style={{ margin: "0 10px" }}
        >
          Value Up
        </button>
        <button
          onClick={() => {
            setMemo((prev) => {
              return prev + 1;
            });
          }}
          style={{ margin: "0 10px" }}
        >
          Dependence Up
        </button>
      </div>
    </>
  );
}

export default App;

 

코드를 확인하면 30번째 줄은 useMemo()를 사용하지 않고 렌더링마다 계속 호출되도록 되어있고, 34번 째 줄은 useMemo()를 사용하여 memo라는 값에 의존하여 다시 호출하고 있다.

 

주석을 하나씩 풀어가면서 실행해보자.

 

useMemo()를 사용하지 않았을 때이다.

 

의존값(memo)를 올리지도 않았는데 Console창을 확인해보면, 3초가 걸리는 무거운 함수를 호출하고있다.

 

useMemo()를 활성화하여 실행해보면

 

의존성 없는 value값을 up 시키고 시간 계산을 위해 startTime을 저장했다.

그 이후에 찍힌 콘솔은 3초가 지났음에도 로그가 찍히지 않은 것을 보여주기 위해 찍었다.

로그가 찍히지않았다는 것은 즉, value값을 up 시켰음에도 delay연산 함수가 실행되지 않았다는 것이다.

 

의존성값을 올리니 당연히 useMemo()로 호출하지 않는 빠른 함수가 실행되어 로그가 찍히고 3초 뒤 딜레이가 있는 함수의 로그가 찍힌다.

 

이로써 렌더링마다 연산에 무리가 있는 값은 캐시하여 성능에 악화를 보강할 수 있다.