[React] React Router

💡 Routering이란?

네트워크에서 경로를 선택하는 프로세스

간단하게 설명하면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다.

💡 React Router란?

React 애플리케이션에서 클라이언트 측 라우팅을 구현하는 데 사용되는 라이브러리

단일 페이지 애플리케이션(Single Page Application, SPA)을 개발할 때 사용자가 다양한 URL로 이동하거나 페이지를 변경할 수 있도록 도와준다.

🧐 SPA(Single Page Application)이란?

• 기존 웹 페이지처럼 여러 개의 페이지를 사용하며, 새로운 페이지를 로드하는 방식 X
• 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 방식

리액트는 SPA 방식을 사용한다. SPA란 웹 앱에 필요한 SPA는 웹 앱에 필요한 모든 정적 리소스를 처음에 한번 다운로드한다. 페이지 간 이동 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있고, 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않는다.

때문에 a태그를 사용하는 것보다 React Router를 사용하는 것이 효율적이다. a태그를 통해 페이지를 이동하게 되면 페이지 전체가 새로 로딩되기 때문에 사용자가 화면 깜박임을 경험하게 된다.
SPA는 페이지 전환 없이 동적으로 콘텐츠를 업데이트하고 상호작용하며 필요한 부분만을 동적으로 업데이트한다. 이는 사용자 경험이 향상되고, 개발 효율성이 증가하며 재사용성과 일관성과 같은 장점이 있다. 때문에 상호작용을 통해 동적으로 필요한 부분을 업데이트 하기 위해 React Router를 사용한다.

💫 React Router 종류

🧐 HashRouter

URL의 해쉬(#) 값을 이용하는 라우터

• 주소에 해쉬(#)가 붇는다.
• 검색 엔진이 읽지 못한다
• 별도의 서버 설정을 하지 않더라도 새로고침 시 오류가 발생하지 않는다.
  이는 해쉬 라우터가 해쉬 뒤의 값은 브라우저에서만 관리하고 서버는 기본 url로 서버에 데이터를 요청하기 때문이다.
• history API를 사용하지 않기 때문에 동적 페이지에 불리하다.

🧐 BrowserRouter

HTML5를 지원하는 브라우저의 주소를 감지하는 라우터

• history API를 사용한다.
• 별도의 서버 설정이 없다면 새로고침 시 404 에러가 발생한다.
  서버에서는 기본 라우트 '/'정보만 저장되어 있고, 이외의 모든 하위 라우팅은 이 default 경로를 통해 이루어지기 때문에 이 경로를 제외하고는 서버에서 인식하지 못한다. 만일 필요하다면 해당 주소와 그에 맞는 페이지를 서버에 알려주어야 한다. 그런게 아니라면 일반적으로는 '/*'의 경로로 접근 시 서버에는 '/'로 리다이렉션 해주면 된다.
• 서버가 존재하고 SEO가 필요한 프로젝트에 적합하다.

💫 React Router 사용법

🧐 설치

• npm

  npm i react-router-dom

• yarn

  yarn add react-router-dom

🧐 사용하기 - BrowserRouter

react-router-dom에 내장되어 있는 BrowserRouter 컴포넌트를 사용한다.

// index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

<Routes> 컴포넌트는 여러 Route를 감싸서 그 중 해당되는 Route를 렌더링 해 주는 역할을 한다. 그 중 <Route>의 path 속성에는 경로를, element속성에는 보여주고 싶은 컴포넌트를 넣어준다.

// App.jsx
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Layout from './Layout';
import Main from './pages/Main';
import PageA from './pages/PageA';
import PageB from './pages/PageB';
import PageC from './pages/PageC';

const App = () => {
  return (
    <Routes>
      <Route path='/' element={<Layout />} >
        <Route index element={<Main />} />
        <Route path='/pageA' element={<PageA />} />
        <Route path='/pageB' element={<PageB />} />
        <Route path='/pageC' element={<PageC />} />
      </Route>
    </Routes>
  );
}
export default App;

Link를 사용하여 링크 넣어주기. a태그와 다르게 페이지를 새로 불러오지 않고 History API를 통해 브라우저 주소의 경로만 바꿀 수 있다.

//SideBar.jsx
import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import $ from './sideBar.module.scss'

const SideBar = () => {
  const CONSTANTS = ["A", "B", "C"]
  const location = useLocation()
  return (
    <article className={$.side_bar}>
      <ul>
        {
          CONSTANTS.map((page) => {
            return  (
              <li key={`page${page}`} className={`/page${page}` === location.pathname ? $.active : ''} >
                <Link to={`/page${page}`}>{`Page ${page}`}</Link>
              </li>
            )
          })
        }
      </ul>
    </article>
  );
};

🧐 사용하기 - createBrowserRouter

React Router가 업데이트 되면서, 공식 문서에서 createBrowserRouter를 권장하고 있는 걸 볼 수 있다! createBrowserRouter는 6.4v부터 사용할 수 있으니 유의해야 한다.

<BrowserRout>로 감싸지 않고 최상단에서 index.jsx에서 <RouterProvider> 를 import한다.
RouterRrovider에는 router={} props를 필수로 넣어야 하는데, Router.jsx에서 createBrowserRouter 함수로 생성한 router를 넘겨준다.

// index.jsx
import { RouterProvider } from 'react-router-dom';
import router from './Router';

root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
);

createBrowserRouter()에 라우팅 할 path와 element로 작성할 수 있다. children 속성으로 배열에 중첩된 라우터(Nested Router)를 추가해 줄 수 있다.

// Router.jsx
import { createBrowserRouter } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
import App from './App';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: '',
        element: <Home />,
      },
      {
        path: 'about',
        element: <About />,
      },
    ],
  },
]);

export default router;

RouterRrovider에 router를 넘기면, root 경로인 <App /> 컴포넌트만 출력된다. 하위 경로(/ + "", / + about)에 알맞는 컴포넌트를 출력하기 위해서 App.jsx에 <Outlet /> 을 추가한다.

// App.tsx
import { Outlet } from 'react-router-dom';
import Header from './Components/Header';

function App() {
  return (
    <div>
      <Header />
      <Outlet />
    </div>
  );
}

export default App;

---

참고 자료

createBrowserRouter-React Router
BrowserRouter-React Router