React 코드 스플리팅과 Suspense 패턴

번들 크기를 줄이고 초기 로딩 속도를 개선하기 위해 코드 스플리팅과 Suspense를 어떻게 조합할지에 대한 간단한 메모입니다.

---

1. lazy와 Suspense 기본

React.lazy와 Suspense를 이용해 라우트 단위, 위젯 단위로 코드를 분리하는 패턴을 정리합니다.

---

2. 폴백 UI 설계

스피너만 두는 대신, 스켈레톤, 최근 데이터, 간단한 문구 등 사용자 경험을 해치지 않는 폴백 예시를 남깁니다.

---

3. 실무에서의 적용 범위

어디까지 쪼개야 이득인지, 너무 많은 분리로 역효과가 나지 않게 하는 기준을 정리합니다.