🐛 React + Zustand에서 발생한 무한 렌더링 이슈 회고

이번 회고에서는 MenuPage에서 발생한 "Maximum update depth exceeded" 오류를 집중적으로 분석하고, 그 원인과 해결 과정을 정리합니다.

🔥 문제 현상

• 메뉴 페이지(MenuPage)가 렌더링 도중 ErrorBoundary에 걸려 fallback UI가 표시됨
• 콘솔에는 다음과 같은 오류 메시지 출력:
  • Maximum update depth exceeded
  • The result of getSnapshot should be cached to avoid an infinite loop

❗ 원인 요약

1. zustand selector에서 "항상 새 객체 반환"

useCartStore(state => state.getTotals(menuItems, options))

• 이 코드는 매번 새로운 { totalCount, totalPrice } 객체를 반환합니다.

• React 18+의 내부 동작(useSyncExternalStore)은

  selector가 반환하는 값이 이전 값과 다르면(얕은 비교),

  "상태가 바뀌었다"고 판단해서 컴포넌트를 다시 렌더링합니다.

• 그런데 selector가 항상 새 객체를 반환하면,

  React는 "상태가 계속 바뀐다"고 생각해서 무한 렌더링 루프에 빠집니다.

2. 무한 렌더링 루프 발생

• 이로 인해 Maximum update depth exceeded 에러가 발생했습니다.

✅ 해결 방법

• zustand에서 items만 selector로 가져오고

• 실제 계산은 useMemo로 감싸서

  items/menuItems/options가 바뀔 때만 새 객체를 반환하도록 변경

수정 예시: