#10 useMemo

useMemo다시 렌더링하는 사이에 계산 결과를 캐시할 수 있게 해주는 React Hook입니다.

const cachedValue = useMemo(calculateValue, dependencies)

 

메모이제이션은 값을 캐싱하여 다시 계산할 필요가 없도록 하는 것으로 생각하면 됩니다.

성능

useMemo을 사용하면 비용이 많이 들고 리소스를 많이 사용하는 기능이 불필요하게 실행되는 것을 방지할 수 있습니다.

이 예에서는 모든 렌더링에서 실행되는 비용이 많이 드는 함수가 있습니다.

카운트를 변경하거나 할 일을 추가할 때 실행이 지연되는 것을 느낄 수 있습니다.

 

// 성능이 좋지 않은 예
import { useState } from "react";
import ReactDOM from "react-dom/client";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const calculation = expensiveCalculation(count);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = () => {
    setTodos((t) => [...t, "New Todo"]);
  };

  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </div>
  );
};

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

 

위 예제에서 최초 랜더링시에도 expensiveCalculation 함수가 호출이 되었습니다.

그런데 문제점은 {addTodo}를 호출하는 버튼을 눌렀을때  expensiveCalculation 와 상관없는 작업을 요청 하였지만

매번 expensiveCalculation  함수가 요청 된다는 것입니다.

 

useMemo 사용

이 성능 문제를 해결하려면 useMemoHook을 사용하여 함수를 메모라이즈할 수 있습니다 expensiveCalculation. 이렇게 하면 함수가 필요할 때만 실행됩니다.
비용이 많이 드는 함수 호출을 .으로 감쌀 수 있습니다 useMemo.
Hook useMemo은 종속성을 선언하기 위한 두 번째 매개변수를 허용합니다. 비싼 함수는 종속성이 변경되었을 때만 실행됩니다.
다음 예에서 비용이 많이 드는 함수는 count 변경될 때만 실행되고, 다른 할 일이 추가될 때는 실행되지 않습니다.

import { useState, useMemo } from "react";
import ReactDOM from "react-dom/client";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const calculation = useMemo(() => expensiveCalculation(count), [count]);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = () => {
    setTodos((t) => [...t, "New Todo"]);
  };

  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </div>
  );
};

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);