React Router(CSR) 활용법

https://reactrouter.com/en/main

Home v6.26.1 | React Router

 

CSR(Client-Side Routing)

Client-Side Routing (CSR)은 웹 애플리케이션에서 사용자가 링크를 클릭할 때, URL은 업데이트되지만 페이지 전체가 새로고침되지 않고, 메인 콘텐츠 영역만 동적으로 업데이트되는 방식입니다.

일반적인 라우팅은 새로운 URL 요청 시 서버에서 전체 HTML 페이지를 받아와 페이지를 새로고침하는 반면, CSR은 필요한 데이터만 서버에서 받아와 화면의 일부만 동적으로 업데이트하여 성능을 최적화합니다.

이를 통해 빠른 사용자 경험을 제공하며, React Router와 같은 도구를 사용하면 SPA의 장점을 유지하면서도 멀티 페이지 애플리케이션의 기능을 효과적으로 활용할 수 있습니다.

 

React-Router 를 이용한 CSR 설정

먼저 React Router 라이브러리를 설치해야 합니다.

yarn add react-router-dom

기본 사용법

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound";
import About from "./pages/About";
import Contact from "./pages/Contact";
import Videos from "./pages/Videos";

// 라우터 설정
const router = createBrowserRouter([
    {
        path: "/",
        element: <Home />,
        errorElement: <NotFound />,
    },
    {
        path: "/videos",
        element: <Videos />,
    },
    {
        path: "/about",
        element: <About />,
    },
    {
        path: "/contact",
        element: <Contact />,
    },
]);

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

export default App;

1. createBrowserRouter 를 통해 라우터를 생성합니다.
   각 경로(path) 와 그 경로에서 렌더링할 요소(element) 를 지정합니다.
   만약 해당 경로에 맞는 페이지가 없을 경우 표시할 오류 페이지를 errorElement로 지정할 수 있습니다.
   
   
2. RouterProvider 로 전체 애플리케이션을 감싸며, 생성된 라우터를 router prop 으로 전달합니다.
   
   
3. path 는 경로를 지정하고, element 에서는 해당 경로에서 렌더링할 컴포넌트를 지정합니다.
   예제에서는 '/' 경로에 <Home /> 페이지를, '/Videos' 경로에는 <Video /> 페이지를, '/about' 경로에는 <About /> 페이지를, '/contact' 경로에는 <Contact /> 페이지를 보여줍니다.
   또한, 경로가 잘못된 경우에는 errorElement로 지정한 컴포넌트가 렌더링됩니다.

Outlet 사용하기

React 애플리케이션에서 페이지의 특정 부분만 동적으로 업데이트하고, 나머지 요소들은 고정시키고 싶을 때, React Router의 Outlet을 사용할 수 있습니다.

예를 들어, 네비게이션 바와 같은 특정 요소는 유지하면서, 메인 콘텐츠 영역만 변경하고 싶을 때 유용합니다.

Outlet은 부모 컴포넌트에서 자식 경로의 컴포넌트들이 렌더링될 위치를 지정합니다.

이를 통해 특정 페이지의 일부만 교체하고, 나머지 레이아웃은 그대로 유지할 수 있습니다.

1. Root.tsx 에서 Outlet 설정: 

Root 컴포넌트에서 네비게이션 바는 고정하고, 나머지 콘텐츠 영역은 Outlet을 통해 동적으로 업데이트됩니다.

// Root.tsx
import React from "react";
import { Outlet } from "react-router-dom";
import Navbar from "../components/Navbar";

export default function Root() {
    return (
        <div>
            <Navbar />
            <Outlet />
        </div>
    );
}

2. Navbar.tsx 에서 Link 사용:

Navbar에서 Link 태그를 사용해 사용자가 클릭할 수 있는 링크들을 제공합니다.

이 Link 태그는 React Router에서 제공하는 컴포넌트로, 페이지를 새로고침하지 않고 경로를 변경할 수 있게 해줍니다.

// Navbar.tsx
import React from "react";
import { Link } from "react-router-dom";

export default function Navbar() {
    return (
        <nav>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
            <Link to="/contact">Contact</Link>
            <Link to="/videos">Videos</Link>
        </nav>
    );
}

Link 대신 useNavigate 훅을 사용할 수도 있습니다. 이를 통해 클릭 이벤트 등을 통해 경로를 변경할 수 있습니다.

// Navbar.tsx
import React from "react";
import { useNavigate } from "react-router-dom";

export default function Navbar() {
    const navigate = useNavigate();

    return (
        <nav>
            <button onClick={() => navigate("/")}>Home</button>
            <button onClick={() => navigate("/about")}>About</button>
            <button onClick={() => navigate("/contact")}>Contact</button>
            <button onClick={() => navigate("/videos")}>Videos</button>
        </nav>
    );
}

3. 라우터 설정:

createBrowserRouter를 통해 루트 경로와 자식 경로들을 설정합니다. 자식 경로들은 Outlet을 통해 렌더링됩니다.

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound";
import About from "./pages/About";
import Contact from "./pages/Contact";
import Root from "./pages/Root";
import Videos from "./pages/Videos";

// 라우터 설정
const router = createBrowserRouter([
    {
        path: "/",
        element: <Root />,
        errorElement: <NotFound />,
        children: [
            {
                index: true,
                element: <Home />,
            },
            {
                path: "/videos",
                element: <Videos />,
            },
            {
                path: "/about",
                element: <About />,
            },
            {
                path: "/contact",
                element: <Contact />,
            },
        ],
    },
]);

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

export default App;

루트 경로(/) 에는 Root 컴포넌트를 설정하고, 그 안에 네비게이션 바와 Outlet을 배치합니다.

자식 경로들은 루트 경로의 children 배열에 정의되며, 각 경로에 맞는 컴포넌트가 Outlet을 통해 특정 부분만 업데이트됩니다.

예를 들어 /about 경로로 이동하면, 네비게이션 바는 유지되고 About 컴포넌트만 업데이트됩니다.

index: true로 설정된 경로는 기본적으로 시작 페이지로 동작하며, 사용자가 해당 경로에 처음 접근할 때 표시됩니다.

Params 사용하기

React 애플리케이션에서 특정 경로의 파라미터를 기반으로 동적 콘텐츠를 보여주고 싶을 때, React Router의 Params 기능을 활용할 수 있습니다.

예를 들어, /videos 경로에 접근하면 <Videos /> 컴포넌트가 렌더링되지만, /videos/:videoId 경로로 접근할 경우 특정 비디오의 상세 페이지를 보여줄 수 있습니다.

1. 경로에 Params 추가하기:

동적 파라미터를 경로에 추가하려면 경로에 :parameterName을 사용합니다. 예를 들어, /videos/:videoId와 같이 설정하면, videos/ 뒤에 오는 모든 값이 videoId라는 파라미터로 처리됩니다.

이를 통해 사용자가 특정 비디오의 ID를 입력하면 해당 ID에 맞는 상세 페이지를 렌더링할 수 있습니다.

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound";
import About from "./pages/About";
import Contact from "./pages/Contact";
import Root from "./pages/Root";
import Videos from "./pages/Videos";
import VideoDetail from "./pages/VideoDetail";

// 라우터 설정
const router = createBrowserRouter([
    {
        path: "/",
        element: <Root />,
        errorElement: <NotFound />,
        children: [
            {
                index: true,
                element: <Home />,
            },
            {
                path: "/videos",
                element: <Videos />,
            },
            {
                path: "/videos/:videoId",
                element: <VideoDetail />,
            },
            {
                path: "/about",
                element: <About />,
            },
            {
                path: "/contact",
                element: <Contact />,
            },
        ],
    },
]);

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

export default App;

2. Videos 컴포넌트에서 파라미터 전송:

Videos 컴포넌트에서 사용자가 입력한 비디오 ID를 기반으로 상세 페이지로 이동하려면, useNavigate 훅을 사용합니다.

입력된 텍스트를 받아 해당 경로로 이동하도록 설정할 수 있습니다.

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

export default function Videos() {
    const [text, setText] = useState("");
    const navigate = useNavigate();
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setText(e.target.value);
    };

    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        setText("");
        navigate(`/videos/${text}`);
    };
    return (
        <div>
            Videos
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    placeholder="video Id:"
                    value={text}
                    onChange={handleChange}
                />
            </form>
        </div>
    );
}

3. VideoDetail 컴포넌트에서 Params 사용

VideoDetail 컴포넌트에서는 useParams 훅을 사용해 경로에서 전달된 videoId 파라미터를 받아옵니다.

useParams는 React Router에서 제공하는 훅으로, 현재 URL의 파라미터를 객체 형태로 반환합니다.

이 훅을 사용하면 경로에 정의된 동적 파라미터에 쉽게 접근할 수 있으며, 이를 기반으로 상세 정보를 표시할 수 있습니다.

예를 들어, /videos/:videoId 경로에서 videoId라는 파라미터를 정의한 경우, useParams를 통해 해당 videoId 값을 받아와서 사용할 수 있습니다.

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

export default function VideoDetail() {
    const { videoId } = useParams();
    return <div>VideoDetail {videoId}</div>;
}