[React] useMemo에 대하여

🎯 들어가며

팀 프로젝트들을 하면서 어떤 코드가 좋은 코드일까 생각이 들었다. 사실 나는 여태껏 전체적으로 구현을 하는 것이 목표인 프로젝트만 했기 때문에 코드의 퀄리티를 생각하지 못했었다. 좋은 코드가 되려면 여러 조건이 있지만 성능 최적화도 중요한 부분이라고 생각한다.

따라서 오늘 React에서 컴포넌트의 성능 최적화를 위해 사용하는 훅인 useMemo에 대해 알아보고 정리해보겠다.

---

📌 useMemo 기본 개념

memoization

• 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거한다.
• 즉, 동일한 값을 반환하는 함수를 반복적으로 호출해야 한다면 처음 값을 계산할 때 해당 값을 메모리에 저장하여 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용한다.

🚩 기본 사용법

useMemo는 특정 값이 변경될 때만 지정한 계산을 수행하고 그렇지 않으면 이전에 계산된 값을 반환한다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• computeExpensiveValue(a, b): 계산 비용이 큰 함수
• [a, b]: 의존성 배열
  → a 또는 b가 변경될 때만 computeExpensiveValue 실행

🚩 useMemo의 동작 방식 (내부 작동 원리)

💻 예시

import { useState, useMemo } from "react";

function ExpensiveCalculation({ number }) {
  const computeSquare = (num) => {
    console.log("⚡ 계산 실행 중...");
    return num ** 2;
  };

  // number가 변경될 때만 computeSquare 실행
  const squaredNumber = useMemo(() => computeSquare(number), [number]);

  return <div>결과: {squaredNumber}</div>;
}

📋 실행 흐름

1. 최초 렌더링

• number = 5
• computeSquare(5) 실행 → 25 반환
• squaredNumber 값 메모이제이션

2. number 값 변경 없음

• 컴포넌트 리렌더링됨
• computeSquare 실행 x → 기존 25 반환

3. number 값 변경됨 (number = 10)

• computeSquare(10) 실행 → 100 반환
• 새로운 값 메모이제이션

---

📌 주로 사용되는 사례

🚩 연산 비용이 큰 계산 최적화

import { useMemo, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const expensiveCalculation = (num) => {
    console.log("💰 비싼 연산 수행...");
    return num ** 2;
  };

  const squaredValue = useMemo(() => expensiveCalculation(count), [count]);

  return (
    <div>
      <p>제곱값: {squaredValue}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
}

• count가 변경될 때만 비싼 연산 수행
• text를 입력해도 불필요한 연산이 실행되지 않는다.

🚩 불필요한 리렌더링 방지

💻 예시

const options = { id: 1 }; // 새 객체가 생성됨
<ChildComponent options={options} />;

❗매번 새로운 객체가 생성되어 리렌더링을 유발한다.

📋 해결

const memoizedOptions = useMemo(() => ({ id: 1 }), []);
<ChildComponent options={memoizedOptions} />;

• options가 동일한 객체 참조를 유지하므로 리렌더링 방지

❗연산이 단순한 경우 필요 없고 오히려 코드 복잡성이 증가하고 메모리 낭비가 발생할 수 있다.

---

😄 마치며

이렇게 useMemo에 대해 알아보았다. 성능 최적화에 유용한 hook이라고 생각이 되는데 아직 실제 프로젝트에 적용을 못해봐서 감이 잘 안 잡힌다. 앞으로 직접 사용해보면서 익히고 싶다. 다음에는 useCallback에 대해 useMemo와 비교해가며 알아보자!