React – Hooks – useMemo 훅

React

useMemo

React ‘useMemo’ 훅은 메모된 값을 반환한다.

⭐ 메모를 다시 계산할 필요가 없도록 값을 캐싱하는 것으로 생각한다.

‘useMemo’ 훅은 종속성 중 하나가 업데이트될 때만 실행된다.

성능을 향상시킬 수 있다.

⭐ useMemo와 useCallback 훅은 유사하다. 주요 차이점은 useMemo는 메모된 값을 반환하고 useCallback은 메모된 기능을 반환한다는 것이다.

성능

‘useMemo’ 후크를 사용하면 값비싼 리소스 집약적인 기능이 불필요하게 실행되지 않도록 할 수 있다.

이 예에서는 모든 렌더에서 실행되는 값비싼 함수가 있다.

카운트를 변경하거나 작업관리를 추가하면 실행이 지연된다.

예제

성능이 좋지 않은 기능이다.
이 expensiveCalculation 함수는 모든 렌더링에서 실행된다.

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 />);

useMemo 사용

이 성능 문제를 해결하려면 ‘useMemo’ 훅을 사용하여 ‘expensive Calculation’ 기능을 메모할 수 있다.
그러면 필요할 때만 해당 기능이 실행된다.

비용이 많이 드는 함수 호출을 ‘useMemo’으로 포장할 수 있다.

‘useMemo’ 훅은 종속성을 선언하는 두 번째 매개 변수를 받아들인다.
비용이 많이 드는 함수는 종속성이 변경된 경우에만 실행된다.

다음 예제에서 값비싼 함수는 카운트가 변경될 때만 실행되고 수행할 작업 시간이 추가되지 않는다.

예제

useMemo 훅을 사용한 성능 예시

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 />);