06. React-Router의 구조

React의 SPA를 보장하기 위한 Router의 구조에 대해서 살펴보고자 한다.

React-router
: React 에서 라우팅을 처리하기 위한 라이브러리
SPA를 구현한다. 페이지를 통해 새로그침하지 않고, 내비게이션과 동적 라우팅을 구현함.

React Router의 주요 구성 요소

• BrowserRouter : 기본 라우터, HTML5 히스토리 API를 사용하여 UI와 URL을 동기화
• Routes와 Router : 애플리케이션의 Route 계층을 정의하고 URL과 매칭되는 방법을 설정
• Link : URL을 변경하지만 전체 페이지를 다시 로드하지 않고 내비게이션 링크를 생성
• Navigate : 프로그래밍 방식으로 다른 라우트로 이동
• Outlet : 매칭된 자식 라우트의 앨리먼트를 렌더링
• useLoaderData : 라우트의 로더에서 반환된 데이터를 접근하기 위한 훅

코드로 라우트 구성 살펴보기

너무 길어서 부분부분 잘라와서 작성할 수 있도록 하겠다.
먼저 살펴볼 부분은 가장 최상단의 MAIN 부분이다.

const router = createBrowserRouter([
  {
    path: `${ROUTE.main}`,
    element: <LandingLayout />,
    children: [
      {
        index: true,
        element: <Landing />,
      },
      {
        path: `${ROUTE.login}`,
        element: <LogIn />,
      },
    ],
  },

createBrowserRouter 를 통해 Router를 구조화하고자 한다.

메인 Route 구성

path : ${Route.main} - 에플리케이션의 메인 섹션에 대한 기본 경로. 가장 최상단의 배경 컴포넌트를 랜더링했다. 이 레이아웃 내에 자식 라우트를 중첩시킴.

보호된 Route

{
    element: <Outlet />,
    errorElement: <Navigate to={ROUTE.main} replace />,
    loader: checkToken,
    children: [
      {
        path: `${ROUTE.tutorial}`,
        element: <Tutorial />,
      },
      {
        path: `${ROUTE.home}`,
        element: <Home />,
        loader: getUser,
      },

이렇게 checkToken이 필요한 route는 AccessToken이 필요하다는 말인데, 이 로더에 의해 보호되어 사용자 인증 상태를 확인한다.
만약 checkToken이 없어서 오류가 발생하면 main으로 리다이렉션된다.

이외에도 getUser Loader를 사용해서 컴포넌트가 불러와지기 전에 필요한 데이터가 있다면 loader를 사용해서 화면을 오류없이 구성할 수 있도록 했다.

Catch-All Route

  {
    path: '/*',
    element: <Navigate to={`${ROUTE.error}/404`} replace />,
  },

마지막으로 정의되지 않은 경로들은 모두 404 오류로 보내버린다.

해당 경로들은 노출되지 않도록 Constants화를 진행시켜 따로 빼놓았다.

export const ROUTE = {
  main: '/',
  login: '/login',
  tutorial: '/tutorial',
  play: '/play',
  ...
}

위 구조의 이점

위와 구조를 통해서 아래와 같은 이점을 얻을 수 있다.

• 중첩된 라우트 : (children)을 사용하여 깔끔하고 계층적인 Route 구조를 만들 수 있어 관리와 확장이 용이함
• 로더 : 컴포넌트가 렌더링되기 전에 데이터를 가져오는게 중요하며, 컴포넌트가 마운트 될 때 필요한 데이터를 먼져 가져오고, 그 후에 컴포넌트가 렌더링 된다.
• 오류 처리 : errorElement 가 발생했을 때, 일반적인 오류 라우트는 메인으로 Redirect 되지만, 우리는 오류 코드를 기반으로 분기 처리까지 함으로 특정 오류 코드를 위한 오류 페이지도 제작하였음.
• 동적 Route Segment : 경로에서 :roomId 와 같은 동적 세그먼트를 사용하여 가변 데이터를 처리할 수 있다.
• 경로 상수화 : 경로를 노출시키지 않고, 객체화하여 깔끔하게 관리할 수 있다.