[React]-React Router에 대해 알아보자!

Router란?

Routing이란!
우리가 주소창에 URL을 입력했을 때 서버에서 요청된 URL에 해당하는 데이터를 전달해주는 것!

Client Side Routing(CSR) 이란?
클라이언트에서 자바스크립트 파일을 받아서, 필요한 데이터도 백엔드로부터 받아와서 클라이언트에서 최종 HTML을 만듦!
서버에게 새로운 페이지를 요청하는 것이 아님!! 페이지는 유지하되, 부분적으로 내가 원하는 곳만 그 경로에 해당하는 컴포넌트를 보여줬다가, 숨겼다가 하는 것!!

Server Side Routing(SSR) 이란?
백엔드에서 필요한 데이터를 채워서 미리 HTML로 만들어줌(서버측에서 렌더링이 일어남), 그걸 클라이언트에게 보내줌

---

React-Router

React-Router는 버전 업데이트가 빈번하므로 꼭 공식사이트를 확인하자!
React Router 공식사이트 가기

---

React-Router 기본 셋팅

터미널에 yarn add react-router-dom 입력하고

// App.js

import "./App.css";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",  // 원하는 경로
    element: <p>Home</p>,  // 보여주고 싶은 것
    errorElement: <p>Not Found😂</p>,  // 잘못된 path를 입력했을 때 에러처리
  },
  {
    path: "/videos",
    element: <p>videos</p>,
  },
]);

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

export default App;

이렇게 하면 React Router 기본 셋팅 끝!

---

Outlet 사용하기

경로를 이동할 때마다 고정된 Navbar가 있고 그 아래에 각각의 컨텐츠를 보여주고 싶다면?
바로 Outlet을 사용하면 된다!

pages 폴더를 만들고 그 아래에 Root.jsx파일을 만들어준다.

// Root.jsx

import React from "react";
import { Outlet } from "react-router-dom";
import Navbar from "../components/Navbar";
export default function Root() {
  return (
    <div>
      <Navbar />
      <Outlet />
    </div>
  );
}

그리고 Navbar 컴포넌트를 만든 후

// Navbar.jsx

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

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

그리고 App.js 파일을 수정한다!

// App.js

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

const router = createBrowserRouter([
  {
    path: "/", // 원하는 경로
    element: <Root />, // 보여주고 싶은 것
    errorElement: <NotFound />, // 잘못된 path를 입력했을 때 에러처리
    children: [
      { index: true, element: <Home /> },
      { path: "/videos", element: <Videos /> },
    ],
  },
]);

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

export default App;

최상위 경로의 Root페이지를 보여주고 경로를 이동할 때마다 그 아래 속해있는 Home, videos 페이지를 children에 넣어주는 것이다. Home은 index페이지가 될 것이므로 index: true가 된다!

---

Param 사용하기

이번에는 Videos 페이지로 이동했을 때, 주소창에 /videos/id를 입력했을 때 해당 id를 가진 video의 상세 페이지로 이동을 하고 싶다면 어떻게 해야 할까?

우선 VideoDetail.jsx 라는 상세페이지 파일을 하나 만든 후

// App.js

  children: [
      { index: true, element: <Home /> },
      { path: "/videos", element: <Videos /> },
      { path: "/videos/:videoId", element: <VideoDetail /> },
    ],

이렇게 App.js 파일의 children 배열에 한줄을 추가해준다.

그리고 Videos.jsx 에서

// Videos.jsx 

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) => {
    setText(e.target.value);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    setText("");
    navigate(`/videos/${text}`);
  };
  return (
    <div>
      Videos
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="video id: "
          value={text}
          onChange={handleChange}
        />
      </form>
    </div>
  );
}

input을 하나 추가해준다. 원하는 videoId를 입력하면 해당 id 상세로 이동 가능하게 만든 것인데, useNavigate를 사용하면 된다!

그리고 이동한 상세페이지에서 해당 id에 관한 데이터를 보여주려면

// VideoDetail.jsx

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

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

이렇게 useParams를 사용해서 해당 videoId를 불러올 수 있다!