개념 정리

URL은 화면 상태의 일부다

지금 bookshelf는 페이지가 하나라서 “지금 무엇을 보고 있는지”가 오직 React state(filter, 선택한 책 등)에만 있습니다. 문제는 이 상태가 주소창의 URL에는 반영되지 않는다는 점입니다.

URL이 화면 상태를 담으면 새로고침·뒤로 가기·북마크·링크 공유가 모두 같은 화면을 가리킵니다. 이것이 라우팅의 핵심 목적입니다.

History API — 브라우저가 이미 제공하는 것

브라우저는 페이지를 다시 불러오지 않고 주소창 URL과 방문 기록을 조작하는 History API(history.pushState, history.replaceState, popstate 이벤트)를 내장하고 있습니다.

아래 예제로 pushState가 URL만 바꾸고 페이지는 다시 불러오지 않는다는 점을 확인합니다.

<button id="go">/books/3으로 이동</button>
<p id="path"></p>
<script src="/main.js"></script>

버튼을 누르면 URL은 /books/3으로 바뀌지만 화면은 render()를 직접 호출해야만 바뀝니다. pushState 자체는 렌더링과 무관합니다.

라우터 없이 직접 구현할 때의 한계

위 예제처럼 pushState와 popstate만으로 라우팅을 만들 수는 있습니다. 하지만 페이지가 늘어나면 다음을 전부 직접 관리해야 합니다.

• URL 패턴(/books/:bookId)에서 파라미터를 뽑아내는 로직
• 중첩된 화면(목록 안의 상세, 상세 안의 편집)을 URL 세그먼트와 맞추는 로직
• 페이지 진입 전에 필요한 데이터를 미리 준비하는 로직
• 뒤로 가기·앞으로 가기·직접 URL 입력까지 전부 같은 화면을 그리는 일관성

React Router의 역할

React Router는 History API 위에 이 로직들을 표준화해 올립니다. 라우트를 객체 배열로 선언하면 URL 매칭, 파라미터 추출, 중첩 렌더링, 진입 전 데이터 준비(loader)까지 라이브러리가 맡습니다. 03편부터 createBrowserRouter로 이 라우트 객체를 정의합니다.

자주 하는 실수

확인 문제

참고 자료

• React Router 공식 문서 - Routing 
• React Router 공식 문서 - Navigating 
• MDN - Working with the History API