React : react-router-dom

react-router-dom

※ 사용하는 이유
- 기존의 SSR에서는 매 페이지 이동마다 새로운 문서를 서버에서 가져와야 했지만, CSR은 브라우저에서 자체적으로 화면을 갱신하므로, 페이지 간 전환 시에 서버에 새로운 문서를 요청할 필요가 없게 된다.
- 이는 사용자가 더 빠르게 원하는 콘텐츠에 접근할 수 있게 해주며, 전체적인 속도와 응답성을 향상시키는 장점이 있다.


※ CSR, SSR 차이점

	CSR	SSR
렌더링 위치	모든 렌더링은 클라이언트 측에서 이루어진다.	서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.
첫 페이지 로딩 시간	처음 로딩 시 모든 HTML, CSS, JS를 한번에 불러오기 때문에 느리다.	필요한 부분의 HTML, CSS, JS만 불러오기 때문에 빠르다.
나머지 로딩 시간	첫 로딩에서 모든 리소스를 미리 받아왔기때문에 렌더링만 해주면 되어서 빠르다.	처음 로딩 시와 동일한 작업을 해주어야 하기 때문에 느리다.
서버 부담	데이터의 변화가 있을때에만 서버에 요청을 보내면 되기 때문에 부담이 적다.	데이터 뿐만 아니라 View의 변화에도 서버에 요청을 보내야하기 때문에 부담이 크다.
UX 측면	새로고침이 적다 (깜빡임 없음)	새로고침이 있다 (깜빡임)
SEO 대응	초기 HTML 파일이 비어있기 때문에 크롤러가 데이터를 수집하기 어려워서 SEO에 좋지 않다.	HTML 파일에 모든 정보가 포함되어 있기 때문에 SEO에 좋다.

※ react-router-dom 설치

npm i react-router-dom

※ router 내의 element 들은 pages 폴더 내에 위치

※ 기본 사용법
- 최초 진입점인 App.js에서 router 생성

import { RouterProvider, createBrowserRouter } from "react-router-dom";
import Root from "./pages/Root";
import Error from "./pages/Error";
import Home from "./pages/Home";
import Make from "./pages/Make";
import Play from "./pages/Play";

// 라우터 생성
const router = createBrowserRouter([
  {
    path: "/",    // root 경로
    element: <Root />,    // root 경로에서 보여줄 컴포넌트
    errorElement: <Error />,    // 에러 발생 시 보여줄 컴포넌트
    children: [    // 자식 컴포넌트 (Outlet에 보여줄 컴포넌트)
      // Outlet에 보여줄 기본 컴포넌트
      {
        index: true,
        element: <Home />,
      },
      // /make 경로로 접근 시 보여줄 컴포넌트
      {
        path: "/make",
        element: <Make />,
      },
      // /play 경로로 접근 시 보여줄 컴포넌트
      // :title = 동적인 url 파라미터
      {
        path: "/play/:title",
        element: <Play />,
      },
    ],
  },
]);

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

export default App;​

- Root.jsx

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

export default function Root() {
  return (
    <>
      <Header></Header> // 항상 상단에 고정이 되는 부분
      <Outlet /> // router에서 children에 해당하는 부분이 보여지는 곳
    </>
  );
}

※ useNavigate, useLocation 사용법

  const navigate = useNavigate();

  const handleNavigate = (detail, detailTitle) => {
    // navigate를 사용한 경로 지정
    navigate(`/play/${detailTitle.replaceAll(" ", "-")}`, {
      // 추가적으로 넘겨줄 데이터
      state: {
        title: detailTitle,
        words: detail.words,
        description: detail.description,
        id: detail.id,
      },
    });
  };

export default function Play() {
  // useNavigate에 state로 담아서 넘겨준 데이터
  const { state } = useLocation();

※ useParam 사용법

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

const PlayDetail = () => {
  // useParams 훅을 사용하여 동적인 URL 파라미터 값을 가져옴
  const { title } = useParams();

  return (
    <div>
      <h1>PlayDetail Page</h1>
      <p>Title: {title}</p>
    </div>
  );
};

export default PlayDetail;

※ Link, navLink 사용법
- Link : 간단한 링크를 생성하여 페이지 이동에 사용한다.
- NavLink : Link와 기본 동작은 동일하나, 리액트 웹의 현재 URL과 NavLink의 to가 가리키는 링크가 일치할 때, activeStyle과 activeClassName이 활성화 되고 일치하지 않으면 비활성화가 된다.

// Link를 사용하여 페이지 이동
<Link to="/store">Go To Store</Link>

// NavLink를 사용하여 페이지 이동
<NavLink to="/" exact activeClassName="active-link">Home</NavLink>