React Hooks - useMemo

컴포넌트의 성능을 극대화하기 위해 useMemo와 useCallback을 사용한다. 

여기서는 useMemo를 알아보자.

useMemo : 동일한 값을 리턴하는 함수의 값을 메모리에 저장해서 재사용한다. 함수의 리턴값을 계산하는 과정이 없어지니 성능이 좋아질 것임은 틀림없다. 

 

사용은 두개의 인자를 받는다. 첫번째는 콜백함수, 두번째는 배열(의존성 배열)이다. 

 

예제 코드를 통해 알아보자.

import { useState } from "react";

const hardCalculate = (number) => {
  console.log('hard 계산!');
  for (let i = 0; i < 999999; i++) {} // 오래걸리도록 의도함.
  return number + 10000;
}

const easyCalculate = (number) => {
  console.log('easy 계산!');
  return number + 1;
}

function App() {
  const [hardNumber, setHardNumber] = useState(1);
  const [easyNumber, setEasyNumber] = useState(1);

  const hardSum = hardCalculate(hardNumber);
  const easySum = easyCalculate(easyNumber);

  return (
    <div>
      <h3>hard 계산기</h3>
      <input
        type="number"
        value={hardNumber}
        onChange={(e) => setHardNumber(parseInt(e.target.value))}
      />
      <span> + 10000 = {hardSum}</span>

      <h3>easy 계산기</h3>
      <input
        type="number"
        value={easyNumber}
        onChange={(e) => setEasyNumber(parseInt(e.target.value))}
      />
      <span> + 1 = {easySum}</span>
    </div>
  );
}

export default App;

hard 계산함수와 easy 계산함수가 있다. 

hard 계산함수에는 시간이 오래걸리도록 for문 조건을 999999번 돌게하였다. 

화면은 다음과 같다. 

 hard 계산기를 통해 계산했을 때 약 1초정도 딜레이되고 화면이 렌더링된다. 

easy 계산기는 값이 +1 증가하는 간단한 함수이고 딜레이는 거의 느끼기 힘들 것으로 예상했다.

하지만 easy 계산기로만 계산을 해도 딜레이를 느낄 수 있다. 왜일까?

그것은 App 컴포넌트가 렌더링되면서 hard 계산기도 호출하기 때문이다. 

 

그렇다면 hard 계산기를 불리지 않게 할 수는 없을까? => useMemo를 사용하면 된다. (Memoization 이라고도 한다.)

사용법은 간단하다. 

hardSum 함수에 useMemo를 선언하고, 콜백함수와 의존성배열을 선언해준다.

  // const hardSum = hardCalculate(hardNumber);
  const hardSum = useMemo(() => {
    return hardCalculate(hardNumber)
  }, [hardNumber]);

이 의미는 hardNumber의 값이 변동이 되지 않으면 이전의 값을 전달해줄게요 라는 뜻이다. 

앱 컴포넌트에 hardSum(계산시간이 다소 걸림), easySum(계산시간이 거의 없음) 함수가 있다면 이렇게 useMemo를 사용해서 hardSum의 계산시간을 줄여서 컴포넌트의 성능을 최적화해준다.