<Router> 는 애플리케이션 최상위에서 한번만 감싸져야(래핑되어야)하는 React Router의 라우팅을 구현하기 위한 핵심 컴포넌트 라고 한다.
따라서 애플리케이션의 최상위 컴포넌트인 App컴포넌트에서 사용되어야 한다고 말한다.
먼 React router에 대해서 학습해야했다.
Client Side Routing
React Router enables "client side routing".
In traditional websites, the browser requests a document from a web server, downloads and evaluates CSS and JavaScript assets, and renders the HTML sent from the server. When the user clicks a link, it starts the process all over again for a new page.
Client side routing allows your app to update the URL from a link click without making another request for another document from the server. Instead, your app can immediately render some new UI and make data requests with fetch to update the page with new information.
This enables faster user experiences because the browser doesn't need to request an entirely new document or re-evaluate CSS and JavaScript assets for the next page. It also enables more dynamic user experiences with things like animation.
Client side routing is enabled by creating a Router and linking/submitting to pages with Link and <Form>:
클라이언트측 라우팅
React Router는 "클라이언트 측 라우팅"을 가능하게 합니다.
기존 웹 사이트에서 브라우저는 웹 서버에서 문서를 요청하고 CSS 및 JavaScript 자산을 다운로드 및 평가하고 서버에서 보낸 HTML을 렌더링합니다. 사용자가 링크를 클릭하면 새 페이지에 대한 프로세스가 다시 시작됩니다.
클라이언트 측 라우팅을 통해 앱은 서버에서 다른 문서를 다시 요청하지 않고 링크 클릭에서 URL을 업데이트할 수 있습니다. 대신, 앱은 일부 새 UI를 즉시 렌더링하고 데이터 요청을 만들어 fetch새 정보로 페이지를 업데이트할 수 있습니다.
이는 브라우저가 완전히 새로운 문서를 요청하거나 다음 페이지를 위해 CSS 및 JavaScript 자산을 재평가할 필요가 없기 때문에 더 빠른 사용자 경험을 가능하게 합니다. 또한 애니메이션과 같은 것으로 보다 동적인 사용자 경험을 가능하게 합니다.
이게 무슨말인가?
React Router는 "클라이언트 측 라우팅"을 가능하게 합니다.(CSR과 비슷)
고객이 예를들어 link를 클릭하면 page process가 돌아가는데
이때 중복되는 UI는 그대로 두고 새로운 것만 http 요청(ex. fetch)에 의해 업데이트 하는 작업을 한다는 의미이다.
이때 기존의 UI랑 데이터는 그대로 유지하는데 이때 데이터 관리를 위한 로직과 UI 렌더링을 담당하는 컴포넌트를 분리한다.
근데 왜 최상위 컴포넌트에서 한번 래핑되어야 하는가?
- Router컴포넌트는 Routing Context를 제공하고 application의 routing관리한다.
→ 이때 Routing Context에는 application 내의 다른 컴포넌트 들에게 현재 URL과 라우팅 상태에 대한 정보를 제공한다고 한다.
- nested routing을 지원한다.
- → 이 기능은 2014년경 Ember.js에서 영감을 받았다고 한다. 거의 모든 경우에 URL segment가 페이지에서 랜더링할 레이아웃과 해당 레이아웃의 데이터 종속성을 결정한다고 한다. 이를 Ember팀이 깨달았다고 한다. URL segment에서 “/Users”라는 경로는 Users 컴포넌트를 랜더링 하는데 사용될 수 있다고 한다. 그리고 동적인 값을 포함할 수 있다고 한다. 예를 들어 “/products/:id”와 같은 경로는 “:id”부분에 동적으로 바뀌는 상품id를 포함한다. 이때 id에 기반한 랜더링을 가져올 수 있다는 것이다.
이 기능에서 최상위 컴포넌트에서 한번 래핑 되어야 하는 이유
최상위 컴포넌트에서 한번 사용해야 Routing Context가 애플리케이션 전체에 공유되어 Nested 라우팅을 지원한다.
만약 하위 컴포넌트에서 추가적인 라우터 컴포넌트를 사용할 경우, 최상위 라우터와 라우팅 상태를 공유한다.
하위 컴포넌트에서 를 사용하면 하위 컴포넌트는 최상위 컴포넌트의 라우팅 상태를 상속하면서도 독립적인 경로와 컴포넌트를 가질 수 있습니다.
(Nested Routes)에 대해 자세히 알아볼 필요 있음
- React Router를 사용할 경우 상태 관리에 유리하다.
이유를 알아볼 필요가 있음 - 브라우저 history 관리가 유리하다.
브라우저 히스토리 api를 사용해서 브라우저 주소 표시줄과 상호작용하는데 한번만 래핑하면 전역으로 브라우저 히스토리관리를 할 수 있다고 한다.
+추가
Router 공식문서에 따르면 컴포넌트는 elemet를 컴포넌트로 지정해서 사용하는게 일반적이다.
import { BrowserRouter, RouterProvider, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<RouterProvider element={<MyComponent />} />
</BrowserRouter>
);
}하지만 컴포넌트를 지정해서 사용할 수도 있다고는 하는데
import { BrowserRouter, RouterProvider, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<RouterProvider Component={MyComponent} />
</BrowserRouter>
);
}후자의 방법은 잘 이용되지 않는 이유가 있다.
React에서는 컴포넌트의 랜더링 사이클에서 이전에 생성된 element를 재사용하는 랜더링 최적화 매커니즘이 있다.
따라서 에서 element를 사용하면 처음 한번만 createElement를 호출하고 해당 element를 생성한다. 이후 랜더링 사이클에서 재사용한다.
하지만 Component를 사용할 경우 Router가 매 랜더링사이클마다 createElement를 호출해서 new element를 생성하는 일이 생기는 것이다.
