Router

라우터

• URL이 어떻게 시작하는지에 따라 나누는 방법
• 공통 시작 부분을 기반으로 URL을 정리해주는 방법

Dynamic segments "partial"이 될 수 없다🙅🏻‍♀️:

🚫 "/teams-:teamId"
✅ "/teams/:teamId"
🚫 "/:category--:productId"
✅ "/:productSlug"

라우터 사용 이유

URL을 더 낫고 독립적인 방법으로 관리하기 위해

---

리액트 라우터

• 리액트 라우터(React Router): 리액트를 이용해서 만든 라이브러리로, 싱글 페이지 애플리케이션(SPA)에서 페이지 이동을 처리할 때 사용된다.

• 기존의 웹: 여러 개의 페이지로 이루어져 있어, 사용자가 페이지를 이동할 때마다 서버에 해당 페이지를 요청하여 새로 로드 ➡️ 불필요한 데이터까지 전송되어 네트워크 트래픽이 증가하고, 사용자 경험이 저하되는 문제가 있다.

• SPA: 하나의 페이지에서 모든 정보를 나타내며, 사용자가 페이지를 이동할 때 필요한 데이터만 서버에 요청하여 로드 ➡️ 네트워크 트래픽을 줄이고, 사용자 경험을 개선할 수 있다.

• 리액트 라우터는 이러한 SPA에서 페이지 이동을 처리하는 데 사용되며, 다양한 라우팅 방식을 제공하여 사용자의 요구에 맞는 페이지 이동을 구현할 수 있다.

리액트 라우터의 종류

1. 리액트 라우터(React Router): 가장 기본적인 라우터, 라우팅 관련 라이브러리
2. 리액트 라우터 돔(React Router DOM): 리액트 라우터의 돔(DOM) 렌더링을 지원하는 라이브러리
3. 리액트 라우터 네이티브(React Router Native): 리액트 라우터의 네이티브(Native) 렌더링을 지원하는 라이브러리
   ...

리액트 라우터 사용방법

1. 프로젝트에 리액트 라우터를 설치

npm install react-router-dom

2. 설치가 완료되면 import문을 이용하여 리액트 라우터를 프로젝트에 불러옴

import { BrowserRouter, Route, Switch } from 'react-router-dom';

3. 이후 BrowserRouter컴포넌트 안에 Route와 Switch컴포넌트를 이용하여 라우팅을 설정

<BrowserRouter>
  <Switch>
    <Route path='/' component={Home} />
    <Route path='/about' component={About} />
  </Switch>
</BrowserRouter>

참고 링크

https://reactrouter.com/en/6.16.0