리액트 라우터 다중 페이지

import { RouterProvider, createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <ErrorPage />,
    children: [
      { index: true, element: <HomePage /> },
      {
        path: "events",
        element: <EventsRootLayout />,
        children: [
          {
            index: true,
            element: <EventsPage />,
          },
          {
            path: ":eventId",
            id: "event-detail",
            children: [
              {
                index: true,
                element: <EventDetailPage />,
              },
              {
                path: "edit",
                element: <EditEventPage />,
              },
            ],
          },
          {
            path: "new",
            element: <NewEventPage />,
          },
        ],
      },
      {
        path: "newsletter",
        element: <NewsletterPage />,
      },
    ],
  },
]);

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

위의 코드는 유데미의 리액트 강의 영상 안의 예시 코드입니다.
https://www.udemy.com/course/best-react/

수강하면서 배운 내용을 주관적인 입장에서 작성했습니다.
오류가 있을 수 있으니 알려주시면 감사하겠습니다!

SPA(Single Page Application)

SPA(Single Page Application)은 단일 페이지 어플리케이션입니다.
이는 한 웹사이트에서 하나의 html 문서를 이용해서 모든 것을 보여준다는 뜻입니다.

이전에 바닐라 자바스크립트로 웹페이지를 만들었을 때 다른 페이지를 보여주기 위해서는 계속해서 html 문서를 만들어야 했습니다.
이 방법의 단점은 비슷한 코드를 반복적으로 작성해줘야 한다는 점과 사용자 입장에서 서버에서 계속해서 html 문서와 css, js 파일을 불러와야 하기 때문에 새로고침시 전체 화면이 깜빡 거리는 현상 + 파일을 받기 위해 기다려야하는 지연 시간이 생긴다는 단점이 있었습니다.

SPA는 이런 않좋은 점을 개선하기 위한 방법으로 최초 페이지 로딩시에 한꺼번에 파일을 받아야하기에 지연 시간이 발생할 수 있지만 이후 필요 부분의 데이터들만 서버로 받으면 되기 때문에 사용자 이용 측면에서 매우 편리해졌습니다.

라우터 사용하는 이유

단일 페이지에서 관리를 하면 페이지가 하나이기 때문에 모든 페이지에서 url이 같아진다는 단점이 있습니다.
기능별로 사용자가 편리하게 이용할 수 있도록 url를 나누어 관리하기 위해서는 리액트의 router 기능을 사용해야 합니다.

중첩된 라우터

라우터를 중첩시켜서 사용함으로서 불필요한 코드의 반복을 줄일 수 있습니다.
가장 최상위의 RootLayout 컴포넌트가 내부의 모든 페이지를 품고 있습니다.
페이지의 기본 골자가 되는 다자인의 영역으로 예를 들어 navbar 같은 요소나 배경색 등을 지정하기 용이합니다.

추가기능

추가로 리액트 라우터에서 제공하는 loader 나 action 기능을 사용함으로서
라우터에 등록한 페이지를 불러올 때 전후의 작업을 함으로써 useEffect에서 불러오던 비동기 통신을 컴포넌트가 랜더링 되기 전에 불러옴으로써 렌더링 효율을 증가시킬 수 있습니다.
action에서는 리액트에서 제공하는 Form을 사용하여 데이터를 편리하게 보내고 해당 데이터를 받아서 추가 기능을 수행할 수 있습니다.
예를 들어 유저가 컨텐츠를 생성하거나 삭제, 수정하는 과정에서 데이터를 받을 뿐만 아니라 method를 받음으로써 다양한 기능을 효율적으로 수행할 수 있게 도와줍니다.

다음 글에서는 추가기능에 대해서 자세하게 다뤄보겠습니다. 읽어주셔서 감사합니다.

---

참고문서

https://www.startupcode.kr/company/blog/archives/11
https://reactrouter.com/en/main/start/concepts