React 라우팅

React Router 사용법: URL, Link, Outlet

React Router는 화면 전환 도구가 아니라 URL을 상태의 일부로 만드는 장치입니다. 주소, 레이아웃, 데이터 위치를 함께 확인합니다.

01

Route object 구성

route object, path, element, children을 먼저 정리하면 URL이 어떤 화면과 layout을 렌더하는지 한눈에 보입니다.

URL 계약
02

Link와 NavLink 상태

내부 이동은 Link로 만들고, 현재 메뉴 표시는 NavLink의 active 상태로 처리해 주소와 navigation UI를 맞춥니다.

라우터 매칭
03

Outlet 레이아웃

공통 layout 안에 Outlet을 두면 header와 sidebar는 유지되고, 자식 route의 화면만 바뀌어 중첩 라우팅 구조가 선명해집니다.

복원과 fallback
04

새로고침과 404 확인

직접 주소 입력, 뒤로가기, 없는 경로를 열어 라우터와 호스팅 fallback이 같은 화면을 드러내는지 확인합니다.

404 fallback
라우터 설치
앱 진입점에서 하나의 router가 전체 route tree를 감싼다 router가 중복되면 Link 동작과 navigation 상태가 예상과 다르게 분리될 수 있습니다.
router root
라우트 구성
path, element, children, index route를 표로 정리한다 중첩 route에서는 부모 layout과 자식 화면이 Outlet으로 만나는 위치를 함께 표시합니다.
path/element
이동 확인
Link 클릭, 직접 주소 입력, 없는 경로를 모두 열어 본다 클릭 이동만 확인하면 새로고침 404나 active menu 오류를 놓칠 수 있습니다.
navigation

React Router로 직접 이동해 볼 장면

링크 이동 Link와 NavLink를 눌렀을 때 주소, 화면 제목, active menu가 함께 바뀝니다.
직접 주소 입력 상세 주소를 새 탭에 붙여 넣어도 router가 같은 route element를 렌더합니다.
없는 경로 처리 wildcard route는 빈 화면 대신 404 안내와 돌아갈 링크를 렌더링합니다.

라우팅 점검

질문: 이 URL은 어떤 route element와 어떤 layout 안에서 렌더되는가
순서: router root 설정 -> route object 작성 -> Link/NavLink 연결 -> 직접 주소와 404 확인
위험: 내부 이동만 맞추면 배포 후 새로고침이나 없는 경로에서 빈 화면이 나올 수 있습니다.