React : useMemo로 성능 최적화하기

useMemo란?

 

useMemo는 React에서 값(또는 연산 결과)을 메모이제이션(memoization)하여 불필요한 계산을 방지하는 Hook. 컴포넌트가 렌더링될 때마다 반복되는 비용이 큰 연산을 피하고, 캐싱된 값을 재사용할 수 있게 해준다.

---

 

결제 페이지에서 initialTotal과 changes 계산이 매 렌더링마다 반복되는 문제를 해결하기 위해 React의 useMemo를 활용했다. 이 과정에서 useMemo의 동작 원리와 사용법을 깊이 파악할 수 있었다.

문제 상황

기존 코드에서는 initialTotal이 매번 새로 계산되었다:

const initialTotal = selectedItems.reduce((acc, item) => acc + item.price * item.quantity, 0);

 

changes도 렌더링 시마다 재연산되며 불필요한 비용이 발생했다.

해결: useMemo 적용

useMemo를 사용해 연산을 메모이제이션했다

const initialTotal = useMemo(() => {
  return selectedItems.reduce((acc, item) => acc + item.price * item.quantity, 0);
}, [selectedItems]);

const changes = useMemo(() => {
  return Math.max(0, charge + splitAmount - initialTotal);
}, [charge, splitAmount, initialTotal]);

 

• initialTotal: selectedItems 변경 시 재계산.
• changes: charge, splitAmount, initialTotal 변경 시 업데이트.

 

useMemo 

1. 동작 원리: useMemo는 의존성 배열이 변경되지 않으면 이전 값을 재사용한다. 렌더링 간 값 캐싱으로 성능을 최적화한다.
2. 사용 시점: 연산 비용이 큰 경우(예: 배열 필터링, 복잡한 계산)에 유용하다. 단순 값 할당에는 오버헤드가 클 수 있다.
3. 주의점: 의존성 배열을 정확히 설정해야 한다. 누락 시 최신 값이 반영되지 않고, 과도하게 추가하면 캐싱 효과가 떨어진다.
4. 비교: useCallback과 비슷하지만, 함수 대신 값(또는 객체)을 메모이제이션하는 데 초점이 맞춰져 있다.

 

결과

불필요한 연산이 줄어 성능이 개선되었다. selectedItems가 커질수록 효과가 더 두드러졌고, UI 반응성도 약간 향상되었다.

 

코드 일부::

export default function PaymentPage() {
  const [totalAmount, setTotalAmount] = useState(0);
  const [charge, setCharge] = useState(0);
  const [splitAmount, setSplitAmount] = useState(0);

  const initialTotal = useMemo(() => /* ... */, [selectedItems]);
  const changes = useMemo(() => Math.max(0, charge + splitAmount - initialTotal), [charge, splitAmount, initialTotal]);

  // 나머지 로직
}