[React 강의] React-Router

• 라우팅 : 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미
• 웹 애플리케이션은 대부분의 경우 여러 페이지로 구성된다.
• 리액트는 SPA로 동작, 여러 컴포넌트로 하나의 페이지에 표시

SPA의 초기 로딩 방식 (CSR)
SPA는 처음 접속 시 애플리케이션에 필요한 주요 JavaScript 번들을 로드한다. 이후 페이지 전환은 서버에 새 요청을 보내지 않고, 브라우저 내에서 클라이언트 라우팅으로 처리한다. 번들 안에 여러 페이지(라우트)의 코드가 함께 포함되는 경우가 많아, 앱 규모가 커지면 초기 로딩 속도가 느려질 수 있다는 단점이 있다.

• 리액트 라우터를 사용하면 손쉽게 라우터로 SPA를 만들 수 있다.

리액트는 SPA(Single Page Application) 기반이므로 서버로부터 매번 새 페이지를 받아오지 않고, React Router를 이용해 브라우저의 URL 주소에 따라 필요한 컴포넌트만 동적으로 렌더링하여 마치 여러 페이지가 있는 것처럼 구현할 수 있다.

• React-Router로 브라우저 주소창에 따라 다른 화면 표시
• React-Router를 적용해서 페이지의 이동이 가능하도록 컴포넌트들을 구성

1. react-router 추가

npm i react-router

• main.tsx

import { createRoot } from 'react-dom/client'
import './index.css'
import { createBrowserRouter, RouterProvider } from 'react-router'

const router = createBrowserRouter([
  {
    path: "",
    element: <div>Hello World</div>,
  }
]);

createRoot(document.getElementById('root')!).render(
  <RouterProvider router={router}></RouterProvider>,
)

• npm run dev

 

2. 기본 라우팅 설정 : 라우터 설정 분리

• src/router/root.tsx 생성

• root.tsx

import { createBrowserRouter } from "react-router";

const router = createBrowserRouter([
  {
    path: "",
    element: <div>Hello World</div>,
  }
]);

export default router;

• main.tsx

import { createRoot } from 'react-dom/client'
import './index.css'
import { RouterProvider } from 'react-router'
import router from './router/root'

createRoot(document.getElementById('root')!).render(
  <RouterProvider router={router}></RouterProvider>,
)

•  src/pages
• 모든 브라우저 주소에 해당하는 페이지를 보여주는 컴포넌트는 pages 디렉터리에 넣는다.

• main-pages.tsx

function MainPage() {
    return (
        <div className="text-3xl">
            <div>Main Page</div>
        </div>
    );
}

export default MainPage;

• src/router/root.tsx 수정
  • React.lazy : 컴포넌트를 실제로 필요한 시점에 비동기적으로 로딩할 수 있게 해준다. 
  • Suspense : lazy 컴포넌트가 로딩되는 동안 보여줄 UI(예: 스피너, 스켈레톤 등)를 fallback으로 설정할 수 있다.
  • <Suspense>와 lazy( )로 필요 시점에 컴포넌트 로딩

import { lazy, Suspense } from "react";
import { createBrowserRouter } from "react-router";

const Loading = () => <div>Loading...</div>
const Main = lazy(() => import("../pages/main-page"));

const router = createBrowserRouter([
  {
    path: "",
    element: <Suspense fallback={<Loading />}><Main /></Suspense>,
  }
]);

export default router;

• src/pages/aboutPage.tsx 추가

• aboutPage.tsx

function AboutPage() {
    return (
        <div className="text-3xl">
            <div>About Page</div>
        </div>
    );
}

export default AboutPage;

• src/router/root.tsx 수정

import { lazy, Suspense } from "react";
import { createBrowserRouter } from "react-router";
// 페이지를 필요할 때만 로딩하기 위해 lazy와 Suspense 사용
const Loading = () => <div>Loading...</div>
const Main = lazy(() => import("../pages/main-page"));
const About = lazy(() => import("../pages/aboutPage"));

const router = createBrowserRouter([
  {
    path: "",
    element: <Suspense fallback={<Loading />}><Main /></Suspense>,
  },
  {
    path: "about",
    element: <Suspense fallback={<Loading />}><About /></Suspense>,
  }
]);

export default router;

• Link : 간단한 경로 이동
• NavLink : Link의 확장 버전으로 현재 URL과 경로가 일치할 경우 자동으로 active 스타일을 적용해주는 컴포넌트이다.
• src/page/main-page.tsx

import { NavLink } from "react-router";

function MainPage() {
    return (
        <div className="text-3xl">
            <div className="flex">
                <NavLink to="/about">About</NavLink>
            </div>
            <div>Main Page</div>
        </div>
    );
}

export default MainPage;

• 처음 접속 시 모든 페이지를 가져옴

• aboutPage 만 가져옴
• src/pages/aboutPage.tsx

import { NavLink } from "react-router";

function AboutPage() {
    return (
        <div className="text-3xl">
            <div className="flex">
                <NavLink to="/">Main</NavLink>
        </div>
           <div>About Page</div>
        </div>
    );
}

export default AboutPage;

• 이전에 가져온 페이지이므로 다시 가져 오지 않음