[ React ] useMemo 너는 언제 사용하는가?

useMemo는 React Hook 중 하나로, 계산된 값을 메모이제이션(Memoization)하여 성능을 최적화하는 데 사용됩니다. 주로 컴포넌트가 렌더링될 때 불필요한 재계산을 방지하고자 할 때 사용됩니다.

useMemo 사용 시기

1. 비싼 계산을 수행할 때: 계산이 복잡하고 시간이 많이 걸리는 경우, 값이 변하지 않는 한 동일한 계산을 다시 수행하지 않도록 메모이제이션할 수 있습니다.
2. 리렌더링을 최소화할 때: 컴포넌트가 자주 리렌더링되는 경우, 특정 값이 변하지 않는 한 해당 값을 다시 계산하지 않도록 할 수 있습니다.

데이터 불러오기 시 useMemo 사용 여부

데이터를 불러오는 작업과는 다른 맥락에서 사용됩니다. 데이터 불러오기는 비동기 작업으로, 주로 useEffect와 함께 사용됩니다. useMemo는 주로 계산된 값을 저장하는 데 사용됩니다. 따라서 데이터를 불러오는 작업 자체에는 useMemo를 사용하지 않습니다.

그러나 데이터를 불러온 후 그 데이터를 기반으로 한 계산이나 가공 작업이 비싸다면, 이 경우에 useMemo를 사용하여 그 계산된 결과를 메모이제이션할 수 있습니다.

예시 상황

1. 비싼 계산 수행 시

import React, { useMemo } from 'react';

const ExpensiveComponent = ({ items }) => {
  const total = useMemo(() => {
    console.log('Calculating total...');
    return items.reduce((sum, item) => sum + item.value, 0);
  }, [items]);

  return (
    <div>
      <p>Total: {total}</p>
    </div>
  );
};

위 예시에서는 items 배열의 값이 변경되지 않는 한, 총합을 다시 계산하지 않습니다. 이는 불필요한 계산을 방지하여 성능을 최적화합니다.

2. 필터링된 리스트

import React, { useMemo } from 'react';

const FilteredList = ({ list, filter }) => {
  const filteredList = useMemo(() => {
    console.log('Filtering list...');
    return list.filter(item => item.includes(filter));
  }, [list, filter]);

  return (
    <ul>
      {filteredList.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

여기서 filter와 list가 변경되지 않는 한, 필터링 작업은 다시 수행되지 않습니다. 이는 리스트의 크기가 클 때 유용합니다.

3. 데이터 가공

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

const DataFetchingComponent = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(fetchedData => {
        setData(fetchedData);
        setLoading(false);
      });
  }, []);

  const processedData = useMemo(() => {
    console.log('Processing data...');
    return data.map(item => ({
      ...item,
      processedValue: item.value * 2,
    }));
  }, [data]);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {processedData.map((item, index) => (
        <li key={index}>{item.processedValue}</li>
      ))}
    </ul>
  );
};

이 예시에서는 데이터를 불러온 후, 해당 데이터를 가공하는 작업이 포함되어 있습니다. 데이터를 불러오는 것은 useEffect로 처리하고, 가공된 데이터를 useMemo로 저장하여 불필요한 재가공을 방지합니다.

요약

• useMemo는 주로 비싼 계산 작업을 메모이제이션하여 성능을 최적화할 때 사용됩니다.
• 데이터를 불러오는 작업 자체에는 사용되지 않지만, 데이터를 불러온 후 그 데이터를 가공하거나 계산하는 작업에 유용하게 사용할 수 있습니다.
• useMemo는 계산된 값이 변하지 않는 한, 동일한 계산을 다시 수행하지 않도록 합니다.