[React] Route

Route

: SPA는 한 페이지로 이루어져있지만, 여러 화면을 보여주는 이유는 경로에 따른 화면을 보여주기 때문입니다. 이렇듯 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)이라고 합니다.

---

React Router

: React Router는 라우팅을 위한 라이브러리입니다. 사용하기 위해 Import 구문을 이용합니다.

React Router의 주요 컴포넌트

• <BrowserRouter>

<BrowserRouter> 컴포넌트는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해줍니다. 또한 <BrowserRouter> 가 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있습니다.

• <Routes>

<Routes> 컴포넌트는 여러 <Route> 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 합니다. 사용하지 않으면 매칭되는 모든 요소를 렌더링합니다.

• <Route>

<Route> 컴포넌트는 path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정합니다. 아래에서 배울 <Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동됩니다.

• <Link>

경로를 연결해 주는 역할을 하는 컴포넌트입니다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경해 줍니다.