[React] React Router v6 적용 및 문법, Router 개념

React-Router

우리가 흔히 말하는 페이지 이동 기능은 리액트에서는 router를 통해 처리할 수 있습니다.

이때 라우터는 라우팅을 처리해주는 것인데요, 라우팅은 무엇일까요?

 

라우팅 (Rounting)

 

• 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각하면됩니다.
• 리액트 라우팅 관련 라이브러리가 많은데 react-router가 가장 많이 사용됩니다.

👉 여기서 잠깐, React는 SPA 구현에 가장 많이 사용되는데요, SPA가 무엇일까요?

SPA, SSR, SSG 개념 및 정리

 

라우터(Router)

사용자가 입력한 주소(URL)을 감지하는 역할을 하며 여러 환경에서 동작할 수 있도록 여러 라우터를 제공합니다. 가장 많이 사용하는 라우터 컴포넌트는 BrowserRouter 와 HashRouter입니다.

• BrowserRouter
  HTML5를 지원하는 브라우저의 주소를 감지한다. (history api 사용
  동적인 페이지에 적합
  새로고팀하면 경로를 찾지 못해서 에러가 난다.
  이를 위해서 추가적인 서버 세팅이 필요하다.
  
  
• HashRouter
  URL의 hash를 활용한 라우터
  해시주소 (https//www.catlog.com/#main)을 감지한다.
  정적인 페이지에 적합하다
  검색 엔진으로 읽지 못한다. #값 때문에 서버가 읽지 못하고 서버가 페이지의 유무를 알지 못하기때문이다. (이 이유로 잘 사용하지 않음)
  새로고침해도 에러가 나지 않는다.

 

React-Router v5와 v6

 

React Router v6가 정식으로 릴리즈 되었는데요 (공식 문서: https://reactrouter.com/en/v6.3.0/upgrading/v5), Recout-Router v5 → v6으로 버전 업그레이드가되면서 문법차이 변화가 생겼습니다. (react 16.8 이상) 버전업이 되면서 코드가 효율적으로 변했을 뿐만 아니라 번들 사이즈가 크게 감소했습니다. 최근에 wmlang 프론트를 react로 개발하면서 react-router v6을 적용하여 관련해서 찾아보았습니다.

 

1) Switch → Routes

• Routes는 기존 Switch처럼 경로를 순서 기준으로 선택하는 것이 아닌 가장 일치하는 라우트 기반으로 선택합니다.
• Routes로 기존 Switch 기능을 대체합니다.
• *Route는 Routes의 직속 자식이어야 합니다.

<v5>

<Switch>     <Route path="/" ... />     <Route path="/" ... /> </Switch>

<v6>

<Routes>     <Route path="/" ... />     <Route path="/" ... /> </Routes>

2) useHistory → useNavigate

• useNavigate로 기존에 useHistory의 기능을 전부 대체
• useHistory의  history는 객체였지만 useNavigate의 navigate는 함수!!

<v5>

const history = useHistory();   history.push('/'); history.go(-1);   //이전 화면으로 이동 history.push(`/user/${userId}`);

<v6>

const navigate = useNavigate();   navigate('/'); navigate(-1);  //이전 화면으로 이동 navigate(`/user/${userId}`);

 

v6에서도 history객체를 쓰고싶다면..?!

npm install history

위 명령어로 history를 설치하고 

import {createBrowserHistory} from "history"; const history = createBrowserHistory();

history의 createBrowserHistory 함수를 import해줍니다.  history 패키지가 제공하는 createBrowserHistory() 함수를 호출하면 history 객체를 생성할 수 있습니다.

이때 history 객체를 통해 history 패키지의 API를 사용할 수 있습니다!

3) useRouteMatch  사라짐

• 상대 경로를 사용할 수 있게되어 useRouteMatch를 사용할 필요가 없어졌습니다

<v5>

const match = useRouterMatch(); console.log(match); // { path: '/', url: '/', isExact: true, params: {} } <Link to={match.url} />; // 현재 url 로 이동 <Link to={`${match.url}/about`}>; // 현재 url에 /about을 붙인곳으로 이동

<v6>

<Link to="" />; // 이렇게 입력시 현재 페이지로 이동 <Link to="about">; // 이렇게 입력시 현재 url에 /about을 붙인 곳으로 이동 *단 about앞에 /about을 붙이게되면 진짜 /about으로 이동되니 현재 기준으로 하려면 앞에 슬래쉬를 빼줘야함   <Route path="" exact /> <Route path="about" />

4) children, component → element

• children이나 component가 사라지고 대신 element를 사용합니다.

<v5>

//component 사용 <Route path="/" exact component={HomePage} />   //children 사용 <Route path="/login" exact>     <LoginPage /> </Route>

 

<v6>

<Route path="/" exact element={<HomePage />} /> <Route path="/login" exact element={<LoginPage />} />

 

5) 중첩 라우팅

• 중첨 라우팅(서브 경로)이 필요한 경우 path 대신 *을 사용합니다.

<v5>

<Route path="/users/:username" component={UsersPage} />

 

<v6>

<Route path="/users/:username/*" element={<UsersPage />} />

 

적용 예시 (중첩 라우팅)

📍예제 홈페이지에 프로젝트 메인이라는 상위 메뉴 하위에 프로젝트 홈 / 멤버 / 설정 이라는 하위 메뉴가 있다고 가정해봅시다. 메뉴 구조를 그림으로 그리면 아래와 같습니다.

 

 

//App.js <Routes>     <Route path="/main/project/*" elemetn={<ProjectMain />     <Routes ... /> </Routes>   //ProjectMain.js <Link to="/main/project/home">프로젝트 홈</Link>   <Routes>     <Route path="/home" element={<ProjectHome />     <Route path="/member" element={<Member />} />      Route path="/setting" element={<ProjectSetting />} /> </Routes>

 

이 외에도 react router v6기반으로 변경된 문법을 찾을 수 있는데요~ 필요할때마다 찾아보신다면 도움이 될 것 같습니다 😀

 

---

📚출처

https://reactrouter.com/en/main

https://velog.io/@ksmfou98/React-Router-v6-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%EC%A0%95%EB%A6%AC