React

REACT는 SPA(Single Page Application)를 구축하기 위한 JavaScript 라이브러리로, SPA는 하나의 페이지로 구성된 웹 어플리케이션을 말한다. 필요한 데이터만 비동기로 받아와서 동적으로 화면에 렌더링 하기 때문에 빠른 반응성을 느낄 수 있다.

react-router-dom이란?

react-router-dom은 React 애플리케이션에서 라우팅을 구현하는 라이브러리이다.

아래 명령어로 설치할 수 있다.

$ npm install react-router-dom

or

$ yarn add react-router-dom

react-router-dom을 사용하는 기본적인 코드는 아래와 같다.

참고로 react-router-dom-v6의 내용이다

기본적인 세팅

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import HomePage from "./pages/HomePage";
import ErrorPage from "./pages/ErrorPage";

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomePage />,
    errorElement: <ErrorPage />,
  },
]);

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

export default App;

createBrowserRouter

router를 정의할 수 있으며, router 객체를 넣을 수 있다.
여기에는 몇 가지 프로퍼티들이 있는데

• path : 작동해야 하는 경로를 의미
• element : 라우트가 활성화되면서 렌더링 되어야 하는 컴포넌트
• errorElement : 해당 페이지의 잘못된 경로나 오류가 발생하면 아래와 같은 상황이 발생한다.
  
  이때 해결할 수 있는 것이 errorElement이다.
  오류가 발생할 시 렌더링 될 컴포넌트를 등록하여 사용할 수 있다.

RouterProvider

router를 사용하는 것을 리액트에게 알려주기 위한 react-router-dom의 컴포넌트

• router : createBrowserRouter 컴포넌트로 생성한 router를 등록

레이아웃

가령, Header나 NavBar 같은 모든 페이지에 계속 렌더링 되어야 하는 컴포넌트가 있을 경우, 매번 귀찮게 추가하려면 번거롭다. 이를 위해 나온 것이 레이아웃이다.

아래처럼 컴포넌트를 하나 추가할 수 있다.

import React from "react";
import { Outlet } from "react-router-dom";
import Header from "../components/Header";

function RootLayout() {
  return (
    <>
      <Header />
      <Outlet />
    </>
  );
}

export default RootLayout;

• Outlet : router에 등록되어 있는 children 컴포넌트가 Outlet에 적용되어 렌더링 된다.

이제 이 컴포넌트를 router에 등록할 수 있다.

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <ErrorPage />,
    children: [
      {index: '', element: <HomePage />}
    ],
  },
]);

• children : array 프로퍼티인데, 라우트 정의를 이용할 수 있다.

이때, children 내부에 index라는 특수한 프로퍼티가 존재한다.
index는 부모 라우트가 활성화 되면 기본적으로 표시되는 컴포넌트를 등록할 수 있다. 위 경우에는 '/'로 이동할 경우 HomePage가 항상 렌더링 되기 때문에 다음과 같이 수정이 가능하다.

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <ErrorPage />,
    children: [
      {index: true, element: <HomePage />},
    ],
  },
]);

이렇게 하면, HomePage에 Header 컴포넌트가 없더라도 RootLayout에 있는 Header 컴포넌트를 매번 렌더링 할 수 있다. 이제 이걸 활용해보면 아래와 같이 작성할 수 있다.

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <ErrorPage />,
    children: [
      { path: "", element: <HomePage /> },
      { path: "articles", element: <ArticlesPage /> },
      { path: "articles/:articleId", element: <ArticleDetailPage /> },
    ],
  },
]);

어느 주소를 가더라도 항상 RootLayout에 있는 Header가 렌더링 된다.
ArticleDetailPage의 path인 '/articles/:articleId'의 사용방법은 다음과 같다.

import { useParams } from "react-router-dom";

function ArticleDetailPage() {
  const params = useParams();

  return (
    <>
      <h3>Article Detail Page</h3>
      <p>{params.articleId}</p>
    </>
  );
}

export default ArticleDetailPage;

useParams 훅을 사용하여 현재 주소의 params를 가져올 수 있다. 내가 router에 등록한 이름이 articleId 이므로 params.articleId를 이용하여 사용할 수 있다.

/articles/3 에 접속하면 다음과 같은 화면이 나온다.

router에 등록되어 있는 path는 부모 라우트에 대한 상대적 주소인데, 이후 주소들을 추가할 때 매번 'article/~~~'를 입력하기엔 상당히 귀찮다. 이를 해결하기 위한 방법은 아래와 같다.

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <ErrorPage />,
    children: [
      { index: true, element: <HomePage /> },
      {
        path: "articles",
        element: <ArticlesRootLayout />,
        children: [
          { path: "", element: <ArticlesPage /> },
          { path: ":articleId", element: <ArticleDetailPage /> },
          { path: ":articleId/edit", element: <EditArticlePage /> },
          { path: "new", element: <NewArticlePage /> },
        ],
      },
    ],
  },
]);

이렇게 router를 설정하면 간편하게 path를 부모 라우트에 상대적인 주소로 설정할 수 있다.