useMemo VS useCallback

 

• useMemo: 비용이 큰 연산 결과를 메모이제이션하여, 불필요한 재계산을 방지합니다.
• useCallback: 함수를 메모이제이션하여, 불필요한 함수 재생성을 방지합니다.

둘 다 리렌더링 시 성능 최적화를 위해 사용되며, 공통점은 ([dependencies]) 배열에 따라 재계산 여부가 결정된다는 점입니다.

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

const ExpensiveComponent = () => {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState('');

  // ✅ useMemo: 값 자체를 메모이제이션
  const expensiveCalculation = useMemo(() => {
    console.log('🔁 Calculating...');
    let result = 0;
    for (let i = 0; i < 1e7; i++) {
      result += count;
    }
    return result;
  }, [count]);

  // ✅ useCallback: 함수를 메모이제이션
  const handleChange = useCallback((e) => {
    setValue(e.target.value);
  }, []);

  return (
    <div>
      <h2>useMemo vs useCallback</h2>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Expensive Result: {expensiveCalculation}</p>

      <input type="text" value={value} onChange={handleChange} />
    </div>
  );
};