React Router

6주차까지는 모든 정보가 하나의 화면에 나열되는 구조였습니다. 요약 카드, 상세 카드, 컨트롤, 폼이 한 페이지에 모두 들어 있었고, 화면이 길어질수록 원하는 정보를 찾기가 어려웠습니다.

실제 서비스에서는 목록과 상세를 별도 페이지로 분리하고, 사용자가 URL을 통해 원하는 화면에 직접 접근할 수 있도록 설계합니다.

7주차에서는 React Router를 도입해 아기사자 대시보드를 여러 페이지로 나눕니다. 첫 화면에서는 요약 카드 목록만 보여주고, 카드를 클릭하면 해당 아기사자의 상세 프로필 페이지로 이동하는 구조입니다. 브라우저의 주소창이 바뀌지만 페이지 전체가 새로 로드되지 않는 SPA(Single Page Application)의 동작 방식을 직접 경험하게 됩니다.

또한 필터/정렬/검색 같은 보기 옵션을 URL과 연동해, 특정 조건으로 필터링된 화면을 URL만으로 다시 재현할 수 있도록 만듭니다. 6주차에서는 화면을 새로고침하면 필터 상태가 사라졌지만, 7주차에서는 URL 자체가 현재 화면 상태를 담고 있어 공유하거나 북마크하는 것이 가능해집니다.