5장. React Router

1. SPA 개요

SPA(Single Page Application)는 하나의 페이지로 구성된 웹 애플리케이션
화면 생성을 기존 SSR(Server Side Rendering)에서 CSR(Client Side Rendering)으로 처리
SPA는 클라이언트 사이드에서 라우팅을 수행하여, URL의 변경에 따라 적절한 화면을 렌더링함

2. Router 개요

SPA에서 라우트(Route)는 Component 간의 이동 또는 전환
라우터(Router)는 화면을 Server에 요청하지 않고 컴포넌트를 실행해 화면을 렌더링
React Router는 React 애플리케이션에서 컴포넌트 라우팅을 관리하기 위한 라이브러리

주요 구성 요소 설명

구성 요소	설명
`createBrowserRouter`	사용자 정의 라우터 생성 및 설정
`RouterProvider`	생성된 라우터를 이용해 하위 컴포넌트에 라우팅 기능 제공
`BrowserRouter`	브라우저의 URL을 감지하고 해당하는 라우트를 렌더링
`Route`	특정 URL 경로와 해당하는 컴포넌트를 매핑하는 역할
`Link`	사용자가 페이지를 이동할 때 사용되는 컴포넌트
`Outlet`	라우터 컴포넌트로 렌더링 된 컴포넌트에서 자식 컴포넌트를 렌더링

3. React Router 관련 Hooks

React Router v6에서 제공하는 Hook의 기능과 특징을 이해
https://reactrouter.com/ 참고

주요 Hook 설명

Hook	설명
`useSearchParams`	URL의 쿼리 매개변수에 접근하기 위한 hook
`useParams`	URL의 주소 매개변수에 접근하기 위한 hook
`useLocation`	현재 URL에 대한 정보에 접근하기 위한 hook
`useNavigate`	라우터를 프로그래밍 방식으로 제어하기 위한 hook

App.jsx 핵심 구조 요약

<h4>Router 기본</h4>
<BrowserRouter>
  <RouterBasicComponent />
</BrowserRouter>

<h4>Router Outlet</h4>
<BrowserRouter>
  <RouterOutletComponent />
</BrowserRouter>

<h4>Router 데이터 전송</h4>
<BrowserRouter>
  <RouteDataComponent />
</BrowserRouter>

<h4>사용자 정의 Router</h4>
<RouterProvider router={root}></RouterProvider>