React > useMemo 훅에 대해서

useMemo 훅은 특정 계산을 메모이제이션하여 성능을 최적화하는 데 사용됩니다.
이 훅을 사용하면 불필요한 계산을 피할 수 있습니다.
즉, 종속성 배열이 변경되지 않는 한 이전 계산 결과를 재사용합니다

 

import React, { useMemo } from 'react';

const MyComponent = ({ items }) => {
  const computedValue = useMemo(() => {
    // items 배열에 대한 복잡한 계산 수행
    return items.reduce((acc, item) => acc + item.value, 0);
  }, [items]);

  return (
    <div>
      <p>Computed Value: {computedValue}</p>
    </div>
  );
};

 

위의 예제에서 useMemo는 items 배열이 변경될 때만 계산을 수행합니다.

items가 변경되지 않으면 이전에 계산된 computedValue를 재사용합니다.

 

언제 useMemo를 사용해야 할까?

• 비싼 계산: 계산이 복잡하고 시간이 많이 걸리는 경우, 이를 메모이제이션하여 성능을 향상시킬 수 있습니다.
• 불필요한 재렌더링 방지: 의존성이 변경되지 않는 경우 계산을 건너뛰어 컴포넌트의 재렌더링을 최적화할 수 있습니다.

주의사항

• 과도한 사용: useMemo를 너무 자주 사용하면 코드가 복잡해지고 유지보수가 어려워질 수 있습니다. 진짜 성능 문제가 발생하는 부분에만 사용하세요.
• 기본형 비교: useMemo는 얕은 비교를 사용하므로 의존성 배열에 포함된 값이 기본형이 아닌 경우(객체, 배열 등) 변경을 감지하지 못할 수 있습니다. 이 경우 의존성 배열을 적절히 관리해야 합니다.

 

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

const ExpensiveCalculationComponent = () => {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState('');

  const expensiveCalculation = (num) => {
    console.log('Calculating...');
    // 시간이 많이 걸리는 계산 시뮬레이션
    for (let i = 0; i < 1000000000; i++) {}
    return num * 2;
  };

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

  return (
    <div>
      <h1>Expensive Calculation with useMemo</h1>
      <input 
        type="text" 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
        placeholder="Type something..." 
      />
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Computed Value: {computedValue}</p>
    </div>
  );
};

export default ExpensiveCalculationComponent;

 

이 예제에서는 버튼을 클릭하여 count를 증가시키면 useMemo가 expensiveCalculation 함수를 호출하여 계산을 수행합니다. 그러나 input 필드의 값이 변경되어도 계산이 다시 수행되지 않습니다. 왜냐하면 count가 변경되지 않았기 때문입니다.