[리액트 라우터 v6.4] 기본 사용법

River Moon·2023년 9월 14일

리액트 라우터 V6.4

목록 보기

1/3

리액트 라우터 v6.4

이 포스트는 리액트 라우터의 최신 버전인 V6.16을 기준으로 작성되었다. 그러나 V6.4 버전 이후로 크게 변한 사항은 없고, v6.4 버전이 그전의 버전들와 많이 달라졌기 때문에 지금 보고계신 이포스트는 v6.4 이후 버전의 리액트 라우터 라고 생각하면 된다.

소개글

이 글은 오로지 리액트 라우터의 최신 버전에 대한 기초적인 사용법에 간략하게 소개한다. 이전 버전과의 차이나 마이그레이션 방법은 다루지 않으므로, 이미 이전 버전을 사용하고 계신 분은 v6.4 이상의 버전에 어떤 변화가 있는지만 간략히 알고 싶다면 이 글을 그냥 참고만 하면 된다 . 마이그레이션에 필요한 자세한 정보는 리액트 라우터의 공식 문서를 보는걸 추천한다.

설치와 사용

리액트 라우터를 사용하려면 먼저 설치해야 한다.

npm install react-router-dom

브라우저 라우터 생성과 첫 라우트 구성

먼저 해야 할 일은 브라우저 라우터를 생성하고, 첫 번째 라우트를 설정하는 것이다. v6.4 버전에서는 새로운 데이터 API를 지원하는 라우터가 도입되었다.

createBrowserRouter는 리액트 라우터 v6.4 이후로 브라우저 라우터를 생성하는 권장되는 방법이다. 이와 달리 <BrowserRouter> 라우터는 새로운 데이터 API를 지원하지 않는다.

v6.4 이후 코드 예시:

//App.jsx
import { RouterProvider, createBrowserRouter } from "react-router-dom";

//객체형 라우트 구성방식
const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

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

export default App;

createBrowserRouter를 사용해서 브라우저 라우터를 생성한 후, 이를 RouterProvider에 전달한다. 이렇게 하면 RouterProvider가 생성한 라우터를 사용해서 라우팅을 관리하게 된다.

예전의 방식을 간단하게 살펴 보겠다.

//v6.4 이전 버전 방식 
import {
  BrowserRouter,
  Route,
  Routes,
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<div>Hello world!</div>} />
      </Routes>
    </BrowserRouter>
  );
}

이제는 BrowserRouter 와 Routes 가 필요없게 됐다.

객체 대신 JSX로 사용하여 라우트를 구성하기

대부분, 저 포함,은 JSX를 이용해 라우트를 구성하는 것을 선호한다. 리액트 라우터 공식 문서의 튜토리얼에서는 객체 방식을 사용한 코드 예시가 나와서 조금 헷갈렸던 경험이 있다.

`createRoutesFromElements`

JSX로 라우트를 설정하려면 createRoutesFromElements 함수가 필요하다. 이 함수는 <Route> 요소를 바탕으로 라우트 객체를 생성해준다.

JSX 라우트 구성 사용:

import {
  Route,
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
} from "react-router-dom";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<div>Hello world!</div>}></Route>
  )
);

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

export default App;

JSX vs 객체 형식의 라우트 구성

리액트 라우터 공식 문서의 튜토리얼에서는 마지막 부분에서 JSX로 라우트를 구성하는 방식도 언급하고 있다. JSX와 객체 형식 사이에는 기능적인 차이가 없다. 이 둘 사이의 차이는 오직 개발자의 스타일과 선호도에 따른 것이다. 따라서 특별히 더 권장하는 방식은 없으며, 자기가 선호하는 방식을 선택해서 사용하면 된다.

River Moon

FE 리버

다음 포스트

[리액트 라우터 v6.4] 기본 사용법