[React] React Router

라우팅이란?

웹 애플리케이션에서 라우팅이란 사용자가 요청한 URL에 맞게 페이지를 보여주는 것을 의미한다. 프로젝트가 하나의 페이지로 구성되어 있다면 라우팅이 필요 없겠지만, 여러 페이지로 구성된 웹 애플리케이션은 페이지 별로 컴포넌트를 다르게해서 관리하기 때문에 라우팅 시스템이 필요하다.

 

 

React Router

React Router는 리액트의 라우팅 관련 라이브러리로 컴포넌트 기반으로 라우팅을 설정할 수 있다. 리액트에서 라우터를 적용하는 방법은 두가지가 있다.

 

1. BrowserRouter

리액트 라우터를 적용할 때는 react-router-dom에 내장되어 있는 BrowserRouter와 Routes, Rout 컴포넌트를 사용한다.

// Home.tsx

const Home = () => {
  return (
    <div>
      <h1>여기는 Home 입니다.</h1>
    </div>
  );
};

export default Home;

// About.tsx

const About = () => {
  return (
    <div>
      <h1>여기는 About 입니다.</h1>
    </div>
  );
};

export default About;

BrowserRouter 컴포넌트는 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로 불러오지 않고도 주소를 변경하고 현재 주소의 경로에 관련된 정보를 리액트 컴포넌트에서 사용할 수 있게 해준다.

 

Route 컴포넌트는 사용자의 브라우저 주소 경로에 따라 원하는 컴포넌트를 보여주는 역할을 한다. Route 컴포넌트를 적용하기 위해서는 Routes 컴포넌트 내부에서 사용되어야 한다.

 

// App.tsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

 

2. createBrowserRouter

 

createBrowserRouter는 React에서 브라우저의 URL을 사용하여 라우팅하는 컴포넌트이다. 이를 사용하면 URL 경로에 따른 컴포넌트를 렌더링할 수 있다.

 

//router.tsx

import { createBrowserRouter } from "react-router-dom";
import Home from "./Home";
import About from "./About";

export const routers = createBrowserRouter([
  { path: "/", element: <Home /> },
  { path: "/about", element: <About /> },
]);

// App.tsx

import { RouterProvider } from "react-router-dom";
import { routers } from "./router";

const App = () => {
  return (
    <>
      <RouterProvider router={routers} />
    </>
  );
};

export default App;

RouterProvider에는 props로 createBrowserRouter 함수로 생성한 router를 넣어줘야 한다. (위 예시는 router.tsx 파일을 따로 분리해서 createBrowserRouter 함수를 사용하여 router를 생성하였다.)

 

createBrowserRouter에는 라우팅할 path와 element를 작성해줘야 한다. (path와 element 속성 외에도 다양한 속성을 가지고 있다. )

 

결과적으로는 BrowserRouter를 사용한 것과 동일한 결과물을 얻을 수 있다.

 

 

---

참고

https://reactrouter.com/en/main/start/overview  

https://reactrouter.com/en/main/routers/create-browser-router