React-Router

---

https://reactrouter.com/en/main

• Router : URL에 따른 페이지 이동

• React-Router : React에서 URL에 따른 페이지 이동

• React : Client UI Library

• React-Router : Client-Side-Routing Library

Client-Side vs Server-Side

• Client-Side : 주체가 Client 쪽 (device 기기 : 브라우저, 모바일 등)
• Server-Side : 주체가 Server 쪽 (Response를 받는 쪽)

Routing

• Client Side Routing
  • Client 쪽에서 URL 이동에 따라 다른 페이지
  • 실제 서버에 해당 URL에 요청이 가지 않는다.
• Server Side Routing
  • Server 쪽에서 URL 이동에 따라 다른 페이지
  • 실제 서버에 해당 URL에 따른 요청이 간다.

Rendering

• Cleint Side Rendering(CSR)

  • Redering 하는 주체가 Client
  • 서버가 Rendering 하지 않는다.

• Server Side Rendering(SSR)

** Rendering == HTML을 만든다

React : Rendering하는JS UI Libarary
-> Brower에서 동작
-> Client-Side에서 Rendering하는 UI Library
-> Client에서 페이지를 구성하여 URL에 따른 페이지 구성 = Client Side Routing

만약 React로 구성하되 SSR하고 싶다면 ?
브라우저에서 하는 것 처럼 React 실행을 서버에서 한 번 해주면 됨
이를 지원하는 라이브러리 혹은 함수 존재
** 장단점을 생각하여 요구사항에 맞게 Trade-Off 하기

시작하기

Vite로 시작하기

npm create vite@latest my-react-router -- --template react

React-Router 설치하기

npm install react-router-dom localforage match-sorter sort-by

• localforage
• match-sorter : filtering 및 정렬 library
• sort-by

Project 구조

• pages -> routes 로 변경하여 썼다.

Vite 환경설정

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    server: {
        proxy: {
            "/api": "http://localhost:3000",
        },
    },
    resolve: {
        alias: [
            //절대 경로로 접근하기
            { find: "~/components", replacement: "/src/components" },
            { find: "~/lib", replacement: "/src/lib" },
            { find: "~/routers", replacement: "/src/routers" },
            { find: "~/routes", replacement: "/src/routes" },
        ],
    },
});

UI-KIT 설치

npm install react-bootstrap bootstrap react-bootstrap-icons

Hello React Router

• routes/page.js

import React from "react";

export default function MainPage() {
    return (
        <div>
            <h1>This is my MainPage</h1>
            <p>MainPage 입니다.</p>
        </div>
    );
}

• routers/main-router.js

import React from "react";
import { createBrowserRouter } from "react-router-dom";
import MainPage from "~/routes/page";

const mainRouter = createBrowserRouter([
    {
        path: "/",
        element: <MainPage />,
        index: true,
    },
]);

export default mainRouter;

• App.js

import "./App.css";
import { RouterProvider } from "react-router-dom";
import mainRouter from "./routes/main-router";

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

export default App;

결과물

/board 페이지 만들기

• routes/board/page.js

import React from "react";

export default function BoardListPage() {
    return (
        <div>
            <h1>BoardList</h1>
            <p>This is BoardListPAge</p>
        </div>
    );
}

• routers/main-router.js

import React from "react";
import { createBrowserRouter } from "react-router-dom";
import MainPage from "~/routes/page";
import BoardListPage from "./board/page";

const mainRouter = createBrowserRouter([
    {
        path: "/",
        element: <MainPage />,
        index: true,
    },
    {
        path: "/board",
        element: <BoardListPage />,
        index: true,
    },
]);

export default mainRouter;

레이아웃 잡기

• src/components/MyNavbar/MyNavbar.js

  https://react-bootstrap.netlify.app/docs/components/navbar
  참고하여 Naber 생성

• src/components/MyFooter/MyFooter.js

  https://getbootstrap.com/docs/5.3/examples/
  참고하여 Footer 생성

• src/routes/board/page.js
  

결과물

board 작성, 상세, 수정에서도 레이아웃이 반복 (nav - contents - footer)
-> 재사용 필요

레이아웃 구성하기

재사용 1. 레이아웃 컴포넌트화

광범위하게 쓰이지만 해당 페이지가 다른 컴포넌트에 비교적 강하게 의존

• src/components/BoardLayout.js
  

• src/routes/board/page.js
  

재사용 2. routes url에 기반해서 만들기

특정 url 경로를 기반으로 컴포넌트 재사용

• src/routes/board/layout.js

import React from "react";
import MyNavbar from "~/components/MyNavbar/MyNavbar";
import { Container } from "react-bootstrap";
import MyFooter from "~/components/MyFooter/MyFooter";
import { Outlet } from "react-router-dom";

export default function BoardListLayout() {
    return (
        <>
            <MyNavbar brandTitle="My-React-Board" />
            <Container className="min-vh-100">
                <Outlet />
            </Container>
            <MyFooter brandTitle="My-React-Board" />
        </>
    );
}

• src/routes/board/page.js

import React from "react";

export default function BoardListPage() {
    return (
        <>
            <h1>My Board</h1>
        </>
    );
}

• src/routers/main-router.js

const mainRouter = createBrowserRouter([
    {
        path: "/",
        element: <MainPage />,
        index: true,
    },
    {
        path: "/board",
        element: <BoardListLayout />,
        children: [
            {
                path: "",
                index: true,
                element: <BoardListPage />,
            },
  			{
                path: "write",
                index: true,
                element: <BoardWritePage />,
            },
        ],
    },
]);

export default mainRouter;

• index: true 없으면 통과
• children 에 path를 추가하여 해당하는 레이아웃 그대로 사용 가능

주요 컴포넌트 및 hook