[React] useMemo() 사용법 _(리액트 Hooks)

 

🧐 React Hooks의 useMemo를 알아보자

 

안녕하세용. 오늘은 리액트 hooks 중에서도 자주 사용되는 편인 useMemo에 대해서 알아보려고 합니다.

 

useMemo() 훅은 React에서 제공하는 하나의 최적화 기술로, 계산 비용이 많이 드는 함수 호출을 메모이제이션하는 데 사용됩니다. 이를 통해 컴포넌트의 리렌더링을 줄이고 성능을 향상시킬 수 있습니다. 본 포스팅은 react 공식 문서를 참고하여 작성되었습니다.

 

오늘은 useMemo Hook에 대해 알아보고 사용해 볼게용 🧐

 

 

---

 

🍊 useMemo는 뭐고, 어디에 사용될까?

useMemo()는 React Hook 중 하나로, 함수형 컴포넌트에서 계산량이 많은 연산을 최적화하는 용도로 사용됩니다. useMemo()는 메모리에 값을 저장해두고, 해당 값이 필요한 경우 이전에 계산한 값을 가져와 사용하기 때문에 불필요한 계산을 줄여줍니다.

 

📍 useMemo가 사용되는 경우

useMemo()는 다양한 상황에서 유용하게 사용될 수 있는데, 주로 다음과 같은 상황에 사용됩니다.

• 계산이 복잡한 함수를 호출하는 경우
• 불필요한 계산을 피하고 성능을 향상시키는 경우
• Props나 상태가 변경되었을 때만 연산을 수행하는 경우

 

---

 

🍊 useMemo 사용법

useMemo()를 사용하려면 다음과 같이 React에서 제공하는 훅을 import 해야 합니다.

import { useMemo } from 'react';

 

useMemo()는 첫 번째 인자로 콜백 함수를 받고, 두 번째 인자로 의존성 배열(dependency array)을 받습니다.

const cachedValue = useMemo(calculateValue, dependencies)

 

📍 첫 번째 인자: calculateValue (콜백 함수)

• React에서는 캐시하고자 하는 값을 계산하는 함수입니다.
• 이 함수는 인자를 받지 않고 어떤 타입의 값이라도 반환합니다.
• 초기 렌더링 시 React는 이 함수를 호출합니다.
• 그 후에는 의존성이 이전 렌더링 이후로 변경되지 않았다면 React는 동일한 값을 다시 반환합니다.

 

📍 두 번째 인자: dependencies (의존성 배열)

• 의존성 배열에는 콜백 함수가 의존하는 값들을 넣어줍니다.
• 의존성 배열의 값이 변경되면, 콜백 함수가 호출되고 그 결과값을 반환합니다. 그렇지 않으면 이전에 계산한 값을 재사용합니다.

 

 

---

 

🍊 이제 useMemo를 직접 사용해보자

기본적으로 리액트는 컴포넌트가 리렌더링될 때마다 그 컴포넌트 전체를 재실행합니다.

예를 들어 아래 코드에서 todoList의 상태가 변하거나 부모로부터 prop를 새로 받아올 때마다 아래 filterTodos 함수는 재실행됩니다.

function TodoList({ todos, tab, theme }) {
  const visibleTodos = filterTodos(todos, tab);
  // ...
}

 

 

📍 투두리스트 다크/라이트 모드

아래는 다크모드, 라이트모드 전환이 가능한 투두리스트를 구현한 코드입니다. filterTodos 함수는 인위적으로 느리게 작동되도록 짜여져 있습니다. 하지만 useMemo를 사용하여 느린 동작 원리임에도 코드는 빠르게 수행됩니다.

 

 

 

📁 TodoList.js

import { useMemo } from 'react';
import { filterTodos } from './utils.js'

export default function TodoList({ todos, theme, tab }) {
  const visibleTodos = useMemo(  // useMemo() 사용
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  return (
    <div className={theme}>
      <p><b>Note: <code>filterTodos</code> is artificially slowed down!</b></p>
      <ul>
        {visibleTodos.map(todo => (
          <li key={todo.id}>
            {todo.completed ?
              <s>{todo.text}</s> :
              todo.text
            }
          </li>
        ))}
      </ul>
    </div>
  );
}

 

📁 App.js

import { useState } from 'react';
import { createTodos } from './utils.js';
import TodoList from './TodoList.js';

const todos = createTodos();

export default function App() {
  const [tab, setTab] = useState('all');
  const [isDark, setIsDark] = useState(false);
  return (
    <>
      <button onClick={() => setTab('all')}>
        All
      </button>
      <button onClick={() => setTab('active')}>
        Active
      </button>
      <button onClick={() => setTab('completed')}>
        Completed
      </button>
      <br />
      <label>
        <input
          type="checkbox"
          checked={isDark}
          onChange={e => setIsDark(e.target.checked)}
        />
        Dark mode
      </label>
      <hr />
      <TodoList
        todos={todos}
        tab={tab}
        theme={isDark ? 'dark' : 'light'}
      />
    </>
  );
}

 

📁 utils.js

export function createTodos() {
  const todos = [];
  for (let i = 0; i < 50; i++) {
    todos.push({
      id: i,
      text: "Todo " + (i + 1),
      completed: Math.random() > 0.5
    });
  }
  return todos;
}

export function filterTodos(todos, tab) {
  console.log('[ARTIFICIALLY SLOW] Filtering ' + todos.length + ' todos for "' + tab + '" tab.');
  let startTime = performance.now();
  while (performance.now() - startTime < 500) {
    // Do nothing for 500 ms to emulate extremely slow code
  }

  return todos.filter(todo => {
    if (tab === 'all') {
      return true;
    } else if (tab === 'active') {
      return !todo.completed;
    } else if (tab === 'completed') {
      return todo.completed;
    }
  });
}

 

 

---

🖐🏻 잠깐, 주의 사항

• useMemo는 Hook이므로 컴포넌트의 최상위 레벨이나 직접 작성한 Hook 내에서만 호출할 수 있습니다.
• 반복문이나 조건문 내에서 호출할 수는 없습니다.
• 엄격 모드(Strict Mode)에서는 의도치 않은 불순물(impurity)을 찾아주기 위해 계산 함수를 두 번 호출합니다.

 

 

---

🍊 요약

이번 포스팅에서는 React의 useMemo() 훅에 대해 다루었습니다. useMemo()는 계산 비용이 많이 드는 함수 호출을 메모이제이션하여 성능을 향상시키는 역할을 합니다. 이를 통해 불필요한 리렌더링을 방지하고 애플리케이션의 성능을 최적화할 수 있습니다. 그럼에도 useMemo()를 남용하면 코드를 복잡하게 만들 수 있으므로, 항상 성능 문제가 실제로 발생하는 경우에만 사용하는 것이 좋아요!

 

다음에는 또 다른 리액트 hook을 주제로 공부해 보겠습니당 👀

 

 

 

참고문서

https://react.dev/reference/react/useMemo

useMemo – React

https://react.dev/learn

Quick Start – React