Vue Router와 비슷하면서도 다른 React Router를 정리합니다.

---

1. Routing이란?

서로 다른 페이지를 보여주기 위한 컴포넌트 배치 작업을 Routing이라고 합니다.

MPA에서 주소마다 다른 페이지가 나오듯, SPA에서도 주소에 따라 해당 페이지를 보여 줘야 합니다. 이 작업을 Routing이라고 합니다.

CRA(Create React App)와 Vue 모두 라우팅을 위해 별도 모듈을 설치해야 합니다.

CRA에서는 react-router-dom, Vue에서는 vue-router를 사용합니다.

이번 글에서는 CRA에서 react-router-dom을 사용하는 방법을 정리합니다. v5에서 v6로 업그레이드되어 v6 기준으로 작성했습니다.

2. Router 설치방법

// yarn
$yarn add react-router-dom

// npm
$npm install react-router-dom --save

react-router-dom에는 BrowserRouter와 HashRouter 두 가지 방식이 있습니다.

• HashRouter : 해시 주소(http://localhost:3000/#/Template)를 감지해 화면을 보여 줍니다.
• BrowserRouter : 브라우저 주소를 감지해 화면을 보여 줍니다.

이번에는 BrowserRouter를 사용합니다.

3. Router 예시

위와 같은 폴더 구조로 파일을 관리하고, Router.js에서 라우팅을 설정한 뒤 Route를 감싸는 Wrapper를 만들었습니다.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import GlobalStyles from './styles/GlobalStyles';
import Router from './Router';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <GlobalStyles />
    <Router />
  </React.StrictMode>
);

RouteWrapper.js

import React from 'react';
import { Outlet } from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';

const RouteWrapper = () => {
  return (
    <>
      <Header />
      <div>
        <Outlet />
      </div>
      <Footer />
    </>
  );
};

export default RouteWrapper;

Router.js

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Main from './pages/Main/Main';
import Template from './pages/Template/Template';
import RouteWrapper from './pages/components/RouteWrapper';

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<RouteWrapper />}> // 'RouteWrapper'를 default로 설정
          <Route index element={<Main />} /> 'main'을 Index 페이지로 설정
          <Route path='Template' element={<Template />} /> '/Template' 주소에 접근 할떄 template 페이지 노출
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

React 실행 화면

실행하면 위 화면처럼 헤더와 푸터 사이에 Main.js와 Template.js가 나타납니다.

정리

아직 Link는 연결하지 않아 Route 사용법만 정리했습니다. 다음에는 Link로 페이지를 이동하는 방법까지 정리할 예정입니다.

reference

• [React] React Router
• [React] react-router-dom v6 업그레이드 되면서 달라진 것들