useMemo – 불필요한 연산 줄여 성능 최적화하기

 

 

안녕하세요 😊
React 컴포넌트가 렌더링될 때,
값을 계산하는 로직이 복잡하거나 무거우면 매번 연산이 반복되어 성능이 저하될 수 있습니다.
이럴 때 useMemo Hook을 사용하면 필요할 때만 연산을 실행하고 결과를 재사용할 수 있습니다.

---

📍 1. useMemo란?

• 메모이제이션(Memoization) 기능을 제공하는 React Hook
• **의존성(dependencies)**이 변경될 때만 콜백 함수를 다시 실행
• 복잡한 계산, 큰 데이터 변환, 필터링, 정렬 등에 유용

문법

const memoizedValue = useMemo(() => {
  // 계산 로직
  return 결과값;
}, [의존성]);

---

📍 2. 기본 예제

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

export default function App() {
  const [count, setCount] = useState(0);

  const expensiveCalculation = (num) => {
    console.log("계산 중...");
    for (let i = 0; i < 1000000000; i++) {} // 무거운 연산
    return num * 2;
  };

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

  return (
    <div>
      <h1>결과: {result}</h1>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

 

📌 count 값이 바뀔 때만 expensiveCalculation 실행
📌 다른 상태 변경 시에는 이전 계산 결과 재사용

---

📍 3. 리스트 필터링 예제

const filteredList = useMemo(() => {
  return items.filter(item => item.active);
}, [items]);

• 리스트 크기가 클수록 성능 이점 커짐

---

📍 4. 언제 사용해야 할까?

✅ 연산 비용이 큰 함수의 결과를 캐싱해야 할 때
✅ 동일한 입력 값에 대해 결과가 항상 같은 경우
✅ 리스트 필터링·정렬 같은 데이터 가공 로직이 있을 때

---

📍 5. 사용 시 주의점

• 모든 계산에 useMemo를 쓰면 오히려 복잡해지고 성능 저하 가능
• **"비싼 연산"**에만 적용
• 의존성 배열([]) 누락 시 의도치 않은 결과 발생 가능

---

✅ 마무리

useMemo는 불필요한 연산을 줄여 성능을 높이는 강력한 도구입니다.
하지만 필요할 때만 사용해야 이점을 극대화할 수 있습니다.
리스트 필터링, 무거운 계산이 반복되는 경우 꼭 적용해보세요. 🚀