Router의 개념

앱은 하나의 독립된 프로그램이다. 따라서 앱에서 다른 페이지로 이동할 때는 개발자가 정의한 방법(버튼을 탭한다던지..., NavBar의 백버튼을 탭하거나, TabBar의 버튼을 탭하거나)으로만 이동할 수 있다. 사용자에게 다른 화면으로 이동하고자 할 때 TabView 혹은 NavigationView를 사용한다.

하지만 웹은 브라우저라는 매개체가 존재한다. 따라서 사용자는 개발자가 정의한 방법 외에도 직접 주소창에 url을 입력해서 다른 페이지로 이동할 수도 있다.

이 페이지 간의 이동을 담당하는 것이 Router이다. 앱에서는 기본적으로 그렇게 많이 쓰이는 개념은 아니다. (물론 RIBS 같은 아키텍쳐에서는 Router의 개념이 존재한다. 하지만 내가 주로 사용했던 SwiftUI에서는 Router를 사용하는 케이스는 드물었다.)

React Router

리액트에서 Routing을 하기 위해서 가장 많이 사용하는 라이브러리가 React Router이다. 많은 포스팅 혹은 영상들이 버전 5를 대상으로 하고 있는데 나는 가장 최근 버전은 6버전을 기준으로 포스팅하고자 한다.

router

React Router를 사용하기 위해서는 가장 먼저 router 객체를 만들어야 한다.

React Router가 제공하는 router의 종류는 다양하다. 문서에 따르면 모든 웹 프로젝트에는 BrowserRouter가 권장된다.

Router는 아래와 같은 코드로 만들 수 있다.

• path에는 경로 url을 적어주면 된다.
• path가 "/"로 시작할 때는 절대 경로이고 그러지 않을 경우는 상대 경로이다.
• element는 해당 경로로 갔을 때 보여줄 React Component이다.
• errorElement는 404 에러가 났을 때 (유저가 찾는 경로가 없을 때) 보여줄 페이지이다.
• children은 해당 경로의 자식 경로들이다.
• children 중에서 index가 true인 경로는 부모 경로와 path가 일치할 때 보여줄 페이지이다.
• path variable을 정의할 때는 변수명 앞에 ":"를 붙인다.

const router = createBrowserRouter([
    {
        path: "/",
        element: <Home />,
        errorElement: <NotFound />,
    },
    {
        path: "/student",
        element: <StudentHome />,
        children: [
            { index: true, element: <Student /> },
            { path: "class/:classId", element: <Class /> },
            { path: "grade", element: <Grade /> },
        ],
    },
    {
        path: "/teacher",
        element: <TeacherHome />,
        children: [
            { index: true, element: <Teacher /> },
            { path: "lesson/:lessonId", element: <Lesson /> },
            { path: "myclass", element: <MyClass /> },
        ],
    },
]);

Router Provider

위처럼 정의한 router를 실제로 사용하기 위해서는 아래처럼 RouterProvider에 router를 전달해주어야한다. RouterProvider로 감싸진 Home component에서는 router에 정의된 경로들을 router를 통해서 이동할 수 있다.

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