router audit

React Router URL 검증

라우팅 실습에서는 클릭, 직접 입력, 뒤로 가기까지 같은 기준으로 확인해야 SPA 동작을 안정적으로 판단할 수 있습니다.

BrowserRouter

앱 최상단에서 History API를 연결해 새로고침 없는 이동 기준을 만듭니다.

Routes / Route

현재 URL과 가장 잘 맞는 element를 골라 화면에 렌더링합니다.

Link / NavLink

a 태그처럼 보이지만 전체 문서를 다시 받지 않고 경로만 갱신합니다.

Hooks

useNavigate와 useParams로 코드 이동과 URL 입력값을 컴포넌트에 연결합니다.

직접 입력 /about을 주소창에 넣어도 같은 컴포넌트가 렌더링되어야 합니다.

링크 이동 NavLink의 active 상태와 페이지 내용이 동시에 바뀌는지 확인합니다.

히스토리 뒤로/앞으로 가기에서 URL과 화면이 서로 어긋나지 않아야 합니다.

라우터 검증의 기준은 클릭 성공이 아니라 URL, 히스토리, 렌더링 결과가 같은 상태를 가리키는지입니다.