useMemo()

1. 개요

useMemo()는 컴포넌트의 최적화를 시키기 위해 사용되는 hook 중 하나이다. useMemo()에서 Memo는 Memoization을 뜻하는데 이는 기존에 수행한 연산의 결과값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다.

---

2. useMemo()를 사용하지 않는 컴포넌트의 랜더링

함수형 컴포넌트도 말 그대로 하나의 함수이다. 즉, 랜더링이 된다는 것은 함수가 호출이 되고 함수 내부에서 선언된 변수는 초기화가 된다.

아래와 같은 컴포넌트가 있다고 가정하자.

import React from "react";

const Test = () => {
  const calculate = () => {
    // 엄청나게 복잡한 로직
    console.log("나 지금 함수 실행하고 있어!");
    return 10;
  };

  const result = calculate();

  return <div>{result}</div>;
};

export default Test;

위의 코드를 보면 App 컴포넌트가 랜더링이 된면 result에 calculate()함수가 실행되어 리턴값이 할당된다.

컴포넌트를 리랜더링시켜보자. 컴포넌트가 리랜더링은 state, props의 변화가 있을 때 한다. 여기서는 간단히 state를 변화시켜 리랜더링을 해보자.

아래와 같이 코드를 추가 작성한다.

import React, { useState } from "react";

const Test = () => {
  const [render, setRender] = useState(false);

  const calculate = () => {
    // 엄청나게 복잡한 로직
    console.log("나 지금 함수 실행하고 있어!");
    return 10;
  };

  const result = calculate();

  const onClickBtn = () => setRender((prev) => !prev);

  return (
    <div>
      {result}
      <button onClick={onClickBtn}>리랜더링</button>
    </div>
  );
};

export default Test;

이제 리랜더링 버튼을 누를 때 마다 state값이 변하게 되어 컴포넌트가 리랜더링 된다. 아래의 콘솔을 보자.

useMemo_rerender1

컴포넌트가 리랜더링 될 때마다 calculate()함수가 다시 호출되는 것을 볼 수 있다. 눈에 보이는 result값은 같지만 리랜더링 될 때마다 변수가 초기화 되기 때문에 calculate()함수가 반복적으로 호출이 된다. 만약 calculate()함수가 무거운 일을 하게 된다면 비효율적인 과정을 계속해서 거치게 되는 것이다. 이를 해결할 수 있는 것이 바로 useMemo()이다.

---

3. useMemo()를 사용한 컴포넌트의 랜더링

이번에는 useMemo()를 사용하여 컴포넌트를 랜더링 해보자.

먼저 useMemo()의 기본 사용법은 아래와 같다. 사용법 const value = useMemo(function, deps)

• function: Memoization을 할 값을 계산해서 리턴해 줄 콜백함수

• deps: 의존성 배열로 useEffect()의 deps와 같다.

2. useMemo()를 사용하지 않는 컴포넌트의 랜더링에서 작성한 코드 중 const result = calculate();를 아래와 같이 수정하자.

const result = useMemo(() => {
  return calculate();
}, []);

calculate()함수의 return값을 Memoization을 하여 result에 할당하고 있다. 그리고 의존성 배열은 비어있기 때문에 컴포넌트가 처음 생성될 때만 useMemo()의 콜백함수가 실행된다.

위와 같이 수정 한 후 아무리 리랜더링 버튼을 눌러도 calculate()함수가 호출되지 않는다.

만약 의존성 배열에 어떠한 값이 있다면 그 값이 변할 때 마다 콜백함수를 다시 호출한다. 해당 경우를 코드와 함께 살펴보자. 아래와 같이 코드를 추가 및 수정한다.

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

const Test = () => {
  const [render, setRender] = useState(false);
  const [num, setNum] = useState(1);

  const calculate = () => {
    // 엄청나게 복잡한 로직
    console.log("나 지금 함수 실행하고 있어!");
    return num * 20;
  };

  const result = useMemo(() => {
    return calculate();
  }, [num]);

  const onClickPlusBtn = () => setNum((prev) => prev + 1);

  const onClickBtn = () => setRender((prev) => !prev);

  useEffect(() => {
    console.log("컴포넌트가 랜더링 되었습니다.");
  }, [render, num]);

  return (
    <div>
      {result}
      <button onClick={onClickPlusBtn}>Plus</button>
      <button onClick={onClickBtn}>리랜더링</button>
    </div>
  );
};

export default Test;

이번에는 useMemo()의 의존성 배열에 num값을 추가 하였고 num값은 state으로 Plus 버튼을 누르 때 마다 증가한다. 즉, useMemo()의 콜백함수는 Plus 버튼을 눌러 num값이 증가하게 되면 다시 호출이 되어 새로운 result값을 가지게 된다. 하지만 여전히 리랜더링 버튼을 누를 때에는 콜백함수가 다시 호출 되지 않는다.

아래는 각각의 버튼을 눌렀을 때 나타나는 콘솔의 모습이다.

useMemo_rerender2

---

4. useMemo()를 항상 사용하여 랜더링 최적하면 좋은걸끼?

정답은 그렇지 않다. 값을 재활용하기 위해 따로 메모리를 소비하여 저장을 하기 때문에 불필요한 값까지 모두 useMemo()를 사용하여 Memoization을 하게 된다면 오히려 성능은 더 안 좋아질 수 있다. 그렇기 때문에 꼭 필요할 때에만 적절하게 useMemo()를 사용해야 한다.

---

5. Conclusion

리액트로 여러 프로젝트를 진행했지만 useMemo()를 사용한 적은 한 번도 없었다. 그 이유는 첫 번째 useMemo()에 대해 몰랐고, 두 번째 랜더링 최적화에 대한 고민을 해 본 적이 없기 때문이다. 그래서 지금까지 진행했던 그리고 진행하고 있는 리액트 프로잭트를 리팩토링 할 때 랜더링 최적화가 필요하다면 적극적으로 useMemo()를 사용할 계획이다. 그렇다고 무분별하게 사용은 하지 않을거다.😃

---

참고

17. useMemo 를 사용하여 연산한 값 재사용하기 [React] useMemo 사용법 및 예제

도움이 많이 되었던 유튜브 🎬

• React Hooks에 취한다 - useMemo 제대로 사용하기 | 리액트 훅스 시리즈

---

👆

📅 2022-08-02