React에서 useMemo 훅 사용법

 

React 애플리케이션의 성능을 최적화하는 것은 사용자 경험을 향상시키는 핵심 요소 중 하나입니다. useMemo는 React에서 제공하는 훅으로, 불필요한 계산을 방지하고 애플리케이션의 성능을 개선하는 데 유용합니다. 이번 글에서는 useMemo의 기본 사용법과 활용 예제를 통해 효과적인 사용 방법을 알아보겠습니다.

---

1. useMemo란 무엇인가?

useMemo는 React에서 제공하는 훅으로, 컴포넌트의 렌더링 중 값 계산을 메모이제이션(memoization)하여 성능을 최적화하는 데 사용됩니다. 특정 값이 변경되지 않는 한, 이전에 계산된 값을 재사용하므로 불필요한 연산을 줄일 수 있습니다.

기본 문법

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• 첫 번째 인자: 계산할 함수를 전달합니다.
• 두 번째 인자: 종속성 배열로, 배열에 포함된 값이 변경될 때만 함수를 재실행합니다.
• 반환값: 메모이제이션된 값이 반환됩니다.

---

2. 왜 useMemo를 사용하는가?

React에서는 컴포넌트가 렌더링될 때마다 내부의 모든 코드가 실행됩니다. 이때, 복잡한 계산 로직이 포함되어 있다면 애플리케이션의 성능이 저하될 수 있습니다. useMemo를 사용하면 이러한 계산이 꼭 필요한 경우에만 실행되도록 제어할 수 있습니다.

사용 시 이점

• 불필요한 계산 방지: 값이 변하지 않으면 이전에 계산한 결과를 재사용.
• 렌더링 성능 최적화: 계산에 소요되는 시간을 절약.
• 코드 가독성 향상: 의도적으로 최적화를 적용했음을 명시적으로 표현.

---

3. useMemo의 기본 사용 예제

아래는 useMemo를 활용하여 복잡한 계산을 최적화하는 간단한 예제입니다.

예제 1: 비싼 계산 로직 최적화

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

function ExpensiveCalculation() {
  const [count, setCount] = useState(0);
  const [otherCount, setOtherCount] = useState(0);

  // 비싼 계산 로직
  const expensiveValue = useMemo(() => {
    console.log('Expensive calculation executed');
    return count * 2;
  }, [count]);

  return (
    <div>
      <p>Expensive Value: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setOtherCount(otherCount + 1)}>Increment Other Count</button>
    </div>
  );
}

export default ExpensiveCalculation;

설명

1. count 값이 변경될 때만 expensiveValue를 재계산합니다.
2. otherCount 값이 변경되더라도 expensiveValue는 재계산되지 않습니다.
3. useMemo를 사용함으로써 불필요한 계산을 방지합니다.

---

4. 실무 활용 사례

예제 2: 리스트 필터링 최적화

아래는 대규모 데이터 리스트를 필터링할 때 useMemo를 사용하는 사례입니다.

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

function FilteredList({ items }) {
  const [filter, setFilter] = useState('');

  // 필터링된 리스트를 메모이제이션
  const filteredItems = useMemo(() => {
    console.log('Filtering items');
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={e => setFilter(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default FilteredList;

설명

1. filter나 items가 변경될 때만 필터링 로직이 실행됩니다.
2. 사용자가 입력 필드를 변경하지 않으면 불필요한 리스트 필터링이 방지됩니다.
3. 대규모 데이터 처리 시 유용합니다.

---

5. useMemo 사용 시 주의 사항

useMemo를 과도하게 사용하면 코드가 복잡해질 수 있으므로 다음 사항을 염두에 두세요:

1. 불필요한 사용 지양: 단순한 계산에는 사용하지 않는 것이 좋습니다.
2. const value = a + b; // useMemo를 사용할 필요가 없음
3. 종속성 배열 관리: 종속성 배열이 올바르지 않으면 의도치 않은 동작이 발생할 수 있습니다.
4. // 잘못된 예시 const memoizedValue = useMemo(() => computeValue(a), []); // 'a'가 종속성 배열에 없음
5. 성능 최적화의 비용: useMemo 자체도 약간의 오버헤드가 있으므로 정말 필요한 경우에만 사용합니다.

---

6. 결론

useMemo는 React 컴포넌트의 성능을 최적화하는 강력한 도구입니다. 특히 복잡한 계산 로직이나 대규모 데이터 처리 시 매우 유용합니다. 하지만 모든 상황에서 사용하는 것은 바람직하지 않으며, 필요에 따라 적절히 활용하는 것이 중요합니다. React 애플리케이션에서 useMemo를 활용하여 렌더링 성능을 개선해 보세요!