오랜만에 React 프로젝트를 처음부터 시작하니 react-router-dom을 어떻게 썼었는지가 기억이 안나 다시 정리해 본다...

React Router

React Reouter 은 클라이언트 측 라우팅을 지원한다.
기존의 웹에서 브라우저는 사용자가 다른 링크로 이동하는 버튼을 누르면, 서버에 문서를 요청하고 HTML, CSS, JavaScript 파일을 내려받아 렌더링을 했다. 또 다른 페이지를 이동하려면 서버를 통해 또 다시 데이터를 받아 검증받는 과정을 거치기에 페이지 사이 이동하는데 딜레이 되는 시간이 많았다!

클라이언트 측 라우팅은 서버에 HTML, CSS, JavaScript등을 다시 요청하지 않고 URL을 업데이트 하고, 새로운 UI를 렌더링해 가져와 서버에서 가져다주는 데이터로 업데이트 할 수 있다.

01 설치

npm install react-router-dom

02 라우터 적용하기

createBrowserRouter

createBrowserRouter 은 모든 React Router web에 권장 되어지는 라우터다.
DOM History API를 이용해 URL을 업데이트하고 stack을 쌓는다.

createBrowserRouter의 첫번째 파라미터에는 routes[]가 들어가는데 여기에 페이지들을 명시해주면 된다!

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';

function App() {
  const router = createBrowserRouter([
    {
      path: '/',
      element: <Home />,
      errorElement: <div>404 Not Found</div>,
    },
  ]);

  return <RouterProvider router={router} />;
}

export default App;

createRoutesFromElements

createRoutesFromElements을 이용해주면 위와 같이 객체를 배열에 담는 형식이 아니라 컴포넌트 식으로 만들 수 있다.

import { createBrowserRouter, RouterProvider, createRoutesFromElements, Route } from 'react-router-dom';
import Home from './pages/Home';

function App() {
  const router = createBrowserRouter(
    createRoutesFromElements(
      <Route path='/' element={<Home />}>
    	<Route path="childre" element={<Children />}/>
      </Route>
    )
  )

  return <RouterProvider router={router} />;
}

export default App;