다중 페이지 React 앱: URL 흐름과 fallback

URL 묶음 사용자가 들어오는 경로를 기능 단위로 모은다

Route 표 중첩과 공통 layout을 매칭 순서로 정한다

Fallback 404와 빈 상태가 이동 흐름을 끊지 않게 한다

Refresh 정적 호스팅 rewrite까지 같은 계약으로 검증한다

페이지 라우트 설계

page route, shared layout, data loading, navigation feedback을 페이지별 요구에 맞춰 나누고 URL만 봐도 현재 화면을 알 수 있게 합니다.

URL 계약

공통 레이아웃과 데이터 위치

header와 navigation은 layout에 두고, 목록과 상세 데이터는 해당 route 컴포넌트 가까이에 두면 이동할 때 상태가 덜 새어 나갑니다.

라우터 매칭

404와 새로고침

없는 경로, 직접 주소 입력, 뒤로가기, 새로고침을 따로 열어 라우터 fallback과 호스팅 rewrite 설정이 맞는지 확인합니다.

복원과 fallback

미리보기에서 확인할 장면

배포 preview에서 링크 이동과 직접 URL 진입을 녹여 보면 로컬 개발 서버가 감춰준 fallback 문제를 빠르게 찾을 수 있습니다.

preview

경로 순서

정적 route와 동적 route가 의도한 화면에 매칭된다 상세 페이지보다 넓은 catch-all이 먼저 잡히지 않도록 route 순서와 wildcard 위치를 확인합니다.

route match

공통 레이아웃

공통 header와 Outlet 위치가 모든 페이지에서 유지된다 페이지 전환마다 사라지면 안 되는 navigation, 인증 표시, 테마 상태는 layout 쪽에 둡니다.

layout

fallback 화면

없는 경로와 데이터 없음은 다른 안내를 보여준다 404는 잘못된 주소를, 빈 목록은 데이터가 없는 상태를 설명해야 사용자가 다음 행동을 고를 수 있습니다.

404/empty

다중 페이지 앱에서 이동해 볼 장면

직접 URL 진입 상세 페이지 주소를 새 탭에서 열어도 같은 제목, 데이터, navigation 상태가 표시됩니다.

없는 경로 존재하지 않는 주소는 빈 흰 화면이 아니라 404 안내와 홈으로 돌아갈 링크를 렌더링합니다.

공통 상태 유지 페이지를 이동해도 header, 선택된 메뉴, 로그인 표시처럼 layout 상태가 예상대로 남아 있습니다.

라우팅 점검

질문: 각 URL은 어떤 페이지, layout, fallback을 보여야 하는가
순서: route 표 작성 -> 공통 layout 배치 -> 직접 URL과 새로고침 확인 -> 배포 preview 점검
위험: 로컬에서는 되는 주소가 배포 환경에서 새로고침 404로 깨질 수 있습니다.