useMemo

useMemo는 리액트에서 제공하는 훅으로, 컴포넌트가 렌더링될 때 비용이 많이 드는 연산을 최적화하기 위해 사용된다. 🧠✨ 특정 값이 변경되었을 때만 계산을 재수행하게 해주므로, 불필요한 연산을 줄이고 성능을 높이는 데 유용하다.

useMemo의 기본 사용법 🔧

useMemo는 다음과 같은 형태로 사용한다:

const memoizedValue = useMemo(() => {
  return 계산이 많이 필요한 값;
}, [의존성 배열]);

여기서 useMemo는 첫 번째 인자로 비용이 많이 드는 함수를 받고, 두 번째 인자로 의존성 배열을 받는다. 의존성 배열의 값들이 변경될 때만 첫 번째 인자의 함수가 다시 실행되어 값을 계산한다. 의존성 배열의 값들이 변경되지 않으면, 이전에 계산한 값을 재사용한다. 🌀

언제 사용해야 할까? 🤔

useMemo는 다음과 같은 상황에서 사용하면 좋다:

비용이 많이 드는 계산을 수행하는 경우:
예를 들어, 큰 배열을 필터링하거나 복잡한 수학적 연산을 할 때 사용하면 유용하다.

컴포넌트가 자주 렌더링되면서 동일한 계산을 반복하는 경우: useMemo를 사용해 이전 계산 결과를 재사용함으로써 불필요한 계산을 방지할 수 있다.

하지만 모든 경우에 useMemo를 사용하는 것은 권장되지 않는다. 지나치게 남용하면 코드가 복잡해지고 관리하기 어려워질 수 있다. 따라서 성능 문제가 발생할 가능성이 있는 경우에만 사용하는 것이 좋다. 🚫

예시 코드 📄

아래는 useMemo를 사용해 큰 배열을 필터링하는 예시이다:

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

const ExpensiveComponent = ({ items }) => {
  const [filter, setFilter] = useState('');

  // useMemo를 사용해 필터링 결과를 메모이제이션
  const filteredItems = useMemo(() => {
    console.log('필터링 중...');
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
        placeholder="검색어를 입력하세요"
      />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default ExpensiveComponent;

위 코드에서는 items 배열을 필터링하는 작업이 useMemo를 통해 메모이제이션된다. 🔍 filter가 변경될 때만 필터링 작업이 다시 수행되며, 그렇지 않으면 이전 필터링 결과를 재사용한다. 이를 통해 성능을 개선할 수 있다.

정리 📌

useMemo는 비용이 많이 드는 연산의 최적화를 위해 사용한다.

의존성 배열의 값이 변경되지 않으면 이전 결과를 재사용하여 불필요한 연산을 방지한다.

성능 최적화가 필요한 경우에만 사용하고, 너무 남용하지 않는 것이 좋다. 😊

이렇게 useMemo를 적절히 사용하면 컴포넌트의 성능을 높이고, 불필요한 계산을 줄일 수 있다!