react-router-dom v6 사용하기

v6.4에 들어서 새로운 라우팅 방법이 생겼다.

createBrowserRouter라는 새로운 함수를 통해서 라우터를 생성하고, Provider에 연결하는 방식이다.

기존의 BrowserRouter와 Routes/Switch를 이용한 라우팅 방법과는 확연한 차이가 있다.

createBrowserRouter의 경우 BrowserRouter를 최상위에 감싸주지 않아도 된다.

import React from 'react'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Com1 from './pages/Com1'
import Com2 from './pages/Com2'

const router = createBrowserRouter([
  {
    path: '/',
    element: <Com1 />,
  },
  {
    path: '/hi',
    element: <Com2 />,
  },
])

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

export default App

그렇다면, 이렇게 변경된 이유는 무엇일까?

createBrowserRouter를 사용하면 어떤 장점이 있는지 찾아보았다.

react-router-dom v6.4가 되면서 loaders, actions, fetchers와 같은 data API들이 생겼는데, 이를 사용하기 위해서는 createBrowserRouter를 사용해야 한다.

 

🧇 loader를 사용하면, async 함수를 사용하여 렌더링하기 전에 데이터를 받아와 컴포넌트에 제공할 수 있다.

loader를 통해서 받아온 데이터는 useLoaderData 훅으로 사용할 수 있다.

 

🍝 action이 설정된 경로는 post, put, patch, delete 요청이 발생할 때 마다 설정된 함수가 실행되게 된다.

 

🥪 fetcher는 useFetcher 훅을 통해 사용할 수 있고, 이는 HTTP 통신을 하는데 사용될 수 있다. fetch 중단 시 자동 취소, 여러번 호출 시 최신 데이터 유지, 리다이렉션 등의 추가 기능을 지원한다.

 

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

Tutorial v6.10.0