스파르타코딩클럽 내일배움캠프 TIL37

• 라우팅이란 ?

  • 우리가 해당하는 페이지에 가기 위해서 즉, 새로운 URL을 요청하면 그 URL에 맞는 데이터를 받아오는 것을 말한다.

• 클라이언트 사이드 라우팅이란 ?

  • 새로운 경로를 입력했을 때 어플리케이션 내에서 업데이트가 필요한 부분만 동적으로 네트워크 요청을 해서 JSON 형태의 데이터를 받아온다.

• 라우팅과 클라이언트 사이드 라우팅 비교

  • 라우팅
    • 페이지 전체를 받아와서 전체를 리프레쉬 하는 것
  • 클라이언트 사이드 라우팅
    • 페이지는 유지하되 부분적으로 내가 원하는 곳만 그 경로에 해당하는 컴포넌트를 부분적으로 보여줬다가 숨겼다가 하는 것
    • 싱글 페이지 어플리케이션의 형태를 유지하면서 멀티 페이지 형태의 장점을 그대로 사용할 수 있다.

• 설치

  • yarn ? yarn add react-router-dom
  • npm ? npm install react-router-dom

• 기본 사용법

import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <p>Home</p>,
    errorElement: <p>Not Found</p>
  },
  {
    path: "/Second", // localhost:3000/Second
    element: <p>Second</p>, // 해당 페이지에 보여줄 내용
    errorElement: <p>Not Found</p> // 에러가 났을 때 보여줄 내용
  },
]);

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

• 아울렛, 파람 사용하기
  • 아울렛
    • src 폴더에 pages 폴더를 만들고 필요한 페이지의 컴포넌트를 만들어준다.
    • 아울렛 안에 내가 원하는 경로를 보여주길 원한다면 경로들을 외부에 작성하는 것이 아니라 자식 루트로 만들어 줘야한다.
  • 파람
    • 각각 페이지에 어떤 파람이 있는지 객체를 전달해준다.
    • 객체 안에 키와 값이 각각 들어있다.
    • 여기에서는 id: "내가 작성한 id"

// Root.jsx

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

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

// App.jsx

import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  // path 라는 루트 요소 안에 자식이 있는데, 자식들의 최상위 경로는 <Home /> 이다.
  // 경로가 "/videos" 라면 <Videos /> 를 보여준다.
  // 이렇게 하면 아울렛 컴포넌트 안에서 해당하는 컴포넌트를 보여준다.
  {
    path: "/",
    element: <Root />,
    errorElement: <NotFound />,
    children: [
      { index: true, element: <Home /> }, // 기본 페이지는 <Home />
      { path: "/videos", element: <Videos /> },
      { path: "/videos/:id", element: <VideosDetail /> },
    ].
  },
  {
    path: "/Second",
    element: <p>Second</p>,
    errorElement: <p>Not Found</p>
  },
]);

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

// Videos.jsx

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

const Input = () => {
  const [content, setContent] = useState("");
  const navigate = useNavigate();
  
  const contentChangeHandler = (event) => {
    setContent(event.target.value);
  };
  
  const onSubmitHandler = (event) => {
    event.preventDefault();
    setContent("");
    navigate(`/videos/${content}`) // Link 처럼 이동하는 훅
  }
  
    return (
    <form onSubmit={onSubmitHandler}>
    <input
          type="text"
          id="content"
          value={content}
          onChange={contentChangeHandler}
        />
    </form>
  export default Input;

// VideoDetail.jsx

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

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