[React] 똑똑하게 useMemo 사용하기

참조(이미지 포함): When to useCallback & useMemo hooks ?

이 글은 [React] 똑똑하게 useCallback 사용하기에서 이어지는 글이다.
리액트의 성능 최적화에 대한 이야기와 useCallback 훅을 사용해 최적화 한 예시를 보고 싶다면, 위 글을 먼저 보고 오기를 추천한다!

useMemo란

useMemo는 재사용된(memoized) 값을 반환하는 훅이다. 이 훅은 데이터의 많은 가공이 필요할 때 적합하다. 예를 들면, 복잡한 수학적 계산이 사용되는 경우나 계산하는데 오랜 시간이 걸리는 로직을 다루는 경우가 이에 해당된다.

먼저 이 함수는 컴포넌트의 첫 렌더 때 실행되고, 이후 리렌더가 될 때마다 캐시된 데이터를 반환해 보여준다. 매번 함수를 실행해서 내부 로직을 다시 계산하는 것이 아니다.

언제 useMemo를 사용해야 할까?

먼저 useMemo를 적용하지 않은 예제를 살펴보자.

import React, { useState } from "react";

export default function App() {
  const [immutableNum, setImmutableNum] = useState(0);
  const [count, setCount] = useState(0);

  const increase = () => {
    console.log("Click Add button!");
    setCount(count + 10);
  };
  const caculateComplexValue = () => {
    console.log("I am doing complex calculation...💤");
    return (immutableNum + 2 * 2 * 99999 * 999999) / 0.213213213;
  };

  return (
    <div className="App">
      <p>count: {count}</p>
      <button onClick={increase}>Add</button>
      <p>Complex Value: {caculateComplexValue()}</p>
    </div>
  );
}

Add 버튼을 클릭하면 count의 값이 증가하고, App 컴포넌트가 리렌더되면서 Complex Value에 해당되는 DOM을 다시 그리기 위해 caculateComplexValue 함수가 재실행된다. 따라서 Add 버튼을 2번 클릭해서 count가 0에서 20으로 증가했을 때 로그를 확인해보면 아래와 같다. 버튼을 클릭할 때마다 caculateComplexValue 함수도 함께 실행되어 로그가 찍히고 있다.

caculateComplexValue 함수가 계산에 필요한 값은 immutableNum으로 버튼을 클릭해도 변경되지 않는 값이다. 즉, 현재 Complex Value는 변경될 일이 없는 값임에도 매번 caculateComplexValue 함수가 재실행되어 불필요하게 동일한 계산을 반복하고 있는 것이다. 이럴 때 useMemo 훅을 사용해 값을 재사용하면 된다!

useMemo 사용하고 성능 최적화하기

import React, { useState, useMemo } from "react";

export default function App() {
  const [immutableNum, setImmutableNum] = useState(0);
  const [count, setCount] = useState(0);

  const increase = () => {
    console.log("Click Add button!");
    setCount(count + 10);
  };
  const caculateComplexValue = useMemo(() => {
    console.log("I am doing complex calculation...💤");
    return (immutableNum + 2 * 2 * 99999 * 999999) / 0.213213213;
  }, [immutableNum]); // 1️⃣

  return (
    <div className="App">
      <p>count: {count}</p>
      <button onClick={increase}>Add</button>
      <p>Complex Value: {caculateComplexValue}</p> {/* 2️⃣ */}
    </div>
  );
}

useMemo 훅으로 감싸면서 의존성 배열에 참조하고 있는 상태 immutableNum을 추가했다(1️⃣). 따라서 이제 caculateComplexValue의 내부 계산 로직은 immutableNum의 값이 같다면 컴포넌트가 리렌더 되어도 다시 실행되지 않고, 이전에 계산했던 값을 재사용하게 될 것이다.

더이상 caculateComplexValue 함수 내부의 로그가 찍히지 않는 걸 확인할 수 있다.

마지막으로 유의할 것은 caculateComplexValue가 더이상 함수가 아니라 함수의 반환값을 들고 있는 변수라는 점이다. useMemo 훅안에서 익명의 화살표 함수를 호출하여 이미 내부 로직을 실행한 상태이기 때문이다. 따라서 JSX 안에서 이전처럼 함수를 호출하는 게 아니라 변수를 참조(2️⃣)해야 문제가 생기지 않는다.

테스트 해보기!