react-router-dom으로 라우팅 구현

데브캠프 프로젝트를 진행하면서 레이아웃 구현을 담당하면서 라우팅 설정까지 담당하게 되었다.
팀원이 공유해준 샘플 코드를 보고 라우팅 설정을 시작했는데 중요한 개념을 한번 정리해보고자 한다.

createBrowserRouter

react-router-dom에서 제공하는 기능으로 라우터 인스턴스를 반환해준다.
아래 예시를 보면 알겠지만, 계층구조로 URL 매핑 정보를 작성하면 간단하게 URL마다 반환해야할 컴포넌트를 지정할 수 있어서 처음 접했음에도 사용하기 어렵지 않았다.

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "team",
        element: <Team />,
      },
    ],
  },
]);

path : 매핑할 URL
element : 상위 컴포넌트 (레이아웃 등 공통적으로 필요한 컴포넌트 지정)
children : 상위 path를 기준으로 하위 매핑 정보를 작성할 수 있다
이밖에 errorElement를 설정해서 오류가 발생할 경우 반환할 컴포넌트도 지정할 수 있다

RouterProvider

prop으로 createBrowserRouter가 반환하는 라우터 객체를 전달하면 알아서 라우팅 정보를 리액트 앱에 제공해준다.
현재 URL을 기준으로 라우트 정보를 매칭해주는 라우팅 상태 관리를 도와주는 기능이라고 이해했다.