React useMemo

useMemo는 React에서 제공하는 성능 최적화용 Hook입니다. 컴포넌트가 렌더링될 때 특정 값의 계산을 반복하지 않고, 종속성 배열에 명시된 값들이 변경되었을 때만 재계산되도록 합니다. 이를 통해 불필요한 연산을 방지하고 성능을 향상시킬 수 있습니다.

---

기본 문법

const memoizedValue = useMemo(() => {
  // 계산할 값 반환
  return expensiveComputation(a, b);
}, [a, b]);

주요 특징

1. 의존성 배열(Dependencies)
   • 의존성 배열에 포함된 값들(a, b)이 변경될 때만 콜백 함수가 실행됩니다.
   • 배열이 비어 있으면([]), 처음 렌더링 시에만 계산됩니다.
2. 메모이제이션(Memoization)
   • 계산된 값을 저장해 두고, 의존성이 변하지 않으면 저장된 값을 재사용합니다.
3. 리소스 절약
   • 값 계산이 비용이 큰 경우(expensiveComputation) 성능 최적화에 유리합니다.

---

사용 예시

1. 복잡한 계산 최적화

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

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

  const expensiveValue = useMemo(() => {
    console.log("Expensive computation...");
    return count * 2;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Expensive Value: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Type something" />
    </div>
  );
}

export default App;

• count가 변경될 때만 expensiveValue를 다시 계산하며, text 변경 시에는 영향을 받지 않습니다.

2. 데이터 필터링 최적화

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

• items가 변경될 때만 필터링 연산을 수행합니다.

---

언제 사용해야 할까?

• 계산량이 많거나 반복 연산이 많은 경우.
• 렌더링 성능이 중요한 컴포넌트에서 값 계산을 최적화하고 싶을 때.

주의사항

• 불필요하게 사용하지 말기: 가벼운 계산에는 useMemo를 사용하지 않는 것이 더 효율적입니다.
• 메모리 사용 증가 가능성: 메모이제이션이 오히려 과도한 메모리 사용을 유발할 수 있으므로 꼭 필요한 경우에만 사용하세요.