[React] useMemo 란?

useMemo 의 사용 목적

useMemo 훅은 계산 비용이 높은 작업의 결과값을 메모이제이션함으로써, 동일한 계산이 반복되어 성능 문제를 일으키는 것을 방지합니다. 이 훅은 렌더링 간에 값의 재계산을 방지하여 최적화를 도모하는 데 목적이 있습니다.

사용 시 주의사항

1. 필요한 경우에만 사용: useMemo는 계산 비용이 큰 작업에 대해서만 사용해야 합니다. 모든 값에 대해 사용할 경우, 메모리 사용량이 증가하고 성능이 오히려 저하될 수 있습니다.
2. 의존성 배열 정확히 관리: useMemo의 의존성 배열에 포함된 값이 변경될 때만 메모이제이션된 값이 업데이트됩니다. 따라서 배열 관리를 정확히 해야 합니다.
3. 값이 아닌 함수 반환: useMemo는 메모이제이션된 값을 반환하는 함수를 첫 번째 인자로 받습니다. 반환할 값이 함수 자체인 경우, useMemo 대신 useCallback을 사용해야 합니다.

예제 코드 및 의존성 설정 방법

아래 예제는 useMemo를 사용하여 리스트의 평균값을 계산하는 컴포넌트를 보여줍니다. 이는 평균값 계산이 상대적으로 비용이 많이 드는 연산인 경우에 유용합니다.

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

function Average({ numbers }) {
  // useMemo를 사용하여 numbers 배열의 평균값을 계산합니다.
  const average = useMemo(() => {
    console.log('평균값 계산 중...');
    if (numbers.length === 0) return 0;
    const sum = numbers.reduce((acc, cur) => acc + cur, 0);
    return sum / numbers.length;
  }, [numbers]); // numbers 배열이 변경될 때만 평균값을 다시 계산합니다.

  return <div>Average: {average}</div>;
}

function App() {
  const [numbers, setNumbers] = useState([1, 2, 3]);
  const [inputValue, setInputValue] = useState('');

  const addNumber = () => {
    const newNumber = parseFloat(inputValue);
    if (!isNaN(newNumber)) {
      setNumbers([...numbers, newNumber]);
    }
    setInputValue('');
  };

  return (
    <div>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        type="number"
      />
      <button onClick={addNumber}>Add Number</button>
      <Average numbers={numbers} />
    </div>
  );
}

의존성 배열 설정 방법

• useMemo의 의존성 배열에는 메모이제이션된 값의 재계산에 영향을 주는 모든 변수와 상태를 포함시켜야 합니다. 이 예제에서는 numbers 배열이 평균값 계산의 기반이 되므로, numbers가 의존성 배열에 포함됩니다.
• 의존성 배열 내의 값이 변경될 때만 메모이제이션된 값이 업데이트되기 때문에, 배열을 정확히 관리하는 것이 중요합니다.

useMemo를 사용함으로써 컴포넌트의 성능을 최적화할 수 있습니다. 그러나 useMemo의 사용은 신중하게 결정해야 하며, 실제로 성능 문제가 관찰되는 경우에 한정해서 적용하는 것이 좋습니다.