[React] useMemo: 성능 최적화를 위한 비장의 무기 🛡️

useMemo 톺아보기! 🛡️

 

React에서 성능 최적화는 필수적이죠. 컴포넌트가 불필요하게 리렌더링되는 문제를 방지하고, 무거운 계산 작업을 효율적으로 처리하기 위해 React는 useMemo라는 훌륭한 Hook을 제공합니다. 오늘은 useMemo의 작동 원리, 사용법, 그리고 실전 활용까지 모든 것을 상세히 다뤄볼게요.

---

useMemo란? 🤔

useMemo는 React Hook 중 하나로, 비용이 많이 드는 계산 결과를 메모이제이션(Memoization)하여 불필요한 재계산을 방지합니다. 컴포넌트가 리렌더링될 때 특정 값이 변하지 않았다면, 이전에 계산한 값을 재사용해 성능을 최적화할 수 있어요.

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

• computeExpensiveValue: 비용이 많이 드는 계산 로직
• [a, b]: 의존성 배열. 값이 변할 때만 계산 수행
• memoizedValue: 메모이제이션된 값

언제 useMemo를 사용할까요?

• 비용이 많이 드는 계산: 복잡한 연산(예: 대규모 데이터 필터링, 복잡한 수학 계산 등)이 있을 때
• 리렌더링 방지: 동일한 값이 계속 계산되는 상황에서
• 성능 최적화: 리렌더링 시마다 불필요한 작업이 실행되지 않도록

주의: useMemo는 성능 최적화 도구일 뿐, 남용하면 코드가 불필요하게 복잡해질 수 있습니다. 성능 병목이 실제로 발생하는 경우에만 사용하세요.

---

useMemo의 문법 🛠️

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

• useMemo의 매개변수
  1. 첫 번째 인수: 계산 로직을 담고 있는 콜백 함수
  2. 두 번째 인수: 의존성 배열(값이 변경되면 콜백 함수 재실행)
• 리턴값
  • useMemo는 계산 결과를 반환하며, 의존성 배열의 값이 변경되지 않으면 이전 값을 재사용합니다.

---

useMemo 기본 예제 🌱

계산 결과 메모이제이션

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

function ExpensiveCalculation({ number }) {
  const computeFactorial = (n) => {
    console.log("Calculating factorial...");
    if (n === 0) return 1;
    return n * computeFactorial(n - 1);
  };
  const factorial = useMemo(() => computeFactorial(number), [number]);

  return (
    <div>
      <h2>Factorial of {number}: {factorial}</h2>
    </div>
  );
}

export default function App() {
  const [number, setNumber] = useState(5);
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <ExpensiveCalculation number={number} />
      <button onClick={() => setNumber(number + 1)}>Increment Number</button>
      <button onClick={() => setCounter(counter + 1)}>Increment Counter</button>
      <p>Counter: {counter}</p>
    </div>
  );
}

 

결과

1. number가 변할 때만 계산:
   • number가 변경되지 않으면 “Calculating factorial…” 메시지가 출력되지 않습니다.
2. 불필요한 재계산 방지:
   • counter가 변경되더라도 factorial은 재계산되지 않아요.

---

실전 활용 사례 💼

대규모 데이터 필터링

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

function FilteredList({ items, searchTerm }) {
  const filteredItems = useMemo(() => {
    console.log("Filtering items...");
    return items.filter((item) =>
      item.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [items, searchTerm]);

  return (
    <ul>
      {filteredItems.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default function App() {
  const [searchTerm, setSearchTerm] = useState("");
  const items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];
  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <FilteredList items={items} searchTerm={searchTerm} />
    </div>
  );
}

 

핵심 포인트

• 검색어를 입력할 때만 필터링 함수 실행
• useMemo 없이 작성했다면 입력값 변화와 무관하게 매번 필터링이 실행됐을 겁니다.

---

useMemo vs React.memo 🗄️

둘은 종종 혼동되지만 목적과 역할이 다릅니다.

특징	useMemo	React.memo
역할	계산 결과를 메모이제이션	컴포넌트를 메모이제이션
사용 대상	함수 내부에서 실행되는 값	React 컴포넌트
의존성 관리	의존성 배열로 특정 값이 변경될 때만 재계산	props가 변경되지 않으면 컴포넌트 리렌더링 방지

---

주의사항 🚨

1. 불필요한 사용 자제:
   • 간단한 계산에는 오히려 성능을 저하시킬 수 있습니다. 복잡한 연산에서만 사용하세요.
2. 의존성 배열 정확히 관리:
   • 의존성을 빠뜨리면, 메모이제이션된 값이 잘못된 상태를 유지할 수 있어요.
3. 메모리 사용:
   • 메모이제이션은 추가적인 메모리 자원을 소비하므로, 남용하지 않도록 주의해야 합니다.

---

useMemo로 배운 모든 것 정리 🧠

1. 불필요한 계산 방지:
   • 컴포넌트 리렌더링 시 의존성이 변하지 않았다면 이전 값을 재사용
2. 리렌더링 최적화:
   • 대규모 데이터 처리, 복잡한 연산, 무거운 로직 등에서 성능 향상
3. 단순한 작업에는 사용하지 말기:
   • 단순한 연산에 적용하면 오히려 성능이 떨어질 수 있어요.
4. React.memo와 비교:
   • useMemo는 계산된 값을, React.memo는 컴포넌트 자체를 메모이제이션

 

useMemo는 적재적소에 사용하면 React 앱의 성능을 크게 향상시킬 수 있는 강력한 도구입니다. 하지만 모든 곳에 사용하는 만능 해결책은 아니에요. 문제를 정확히 파악하고 필요한 곳에 알맞게 활용하세요. 그럼 여러분의 앱은 더 빠르고 효율적으로 동작할 거예요!

 

🌷전설의 개발자가 되어봅시당! 🌷