React 코드 스플리팅과 Suspense 패턴

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

1. lazy와 Suspense 기본

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

2. 폴백 UI 설계

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

3. 실무에서의 적용 범위

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