routing이란 클라이언트에서 url을 요청했을때 서버에서 요청된 url에 해당하는 데이터를 클라이언트로 전달해주는 행위다.
일반적으로는 새로운 html파일을 받아 업데이트 한다. (페이지의 새로고침)

CSR(Client Side Routing)

CSR에서는 url을 요청했을때 데이터를 받아와 업데이트는 되지만 페이지가 새로고침 되진 않는다.
즉 데이터를 받아올때 새로운 html을 받아오는 것이 아니라 해당 페이지에 필요한 데이터만 받아와 기존의 html의 업데이트가 필요한 부분만 업데이트 한다.
대표적인 예로 React Router이 있다.

React Router

React Router는 버전 업데이트가 자주 되므로 공식문서를 자주 방문하는 것이 좋다.
React Router 공식문서

install

// npm
npm install react-router-dom

// yarn
yarn add react-router-dom

기본 사용법

import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

// createBrowserRouter인자로 path, 화면에 보여질 element를 전달한다.
// path가 잘못 됐을때 react router에서 자체적으로 출력하는 페이지가 있는데 변경하고 싶다면 root경로에 errorElement 속성을 사용하면 된다.
const router = createBrowserRouter([
  {
    path: "/",
    element: <p>Home</p>,
    errorElement: <p>Not Found😅</p>
  },
  {
    path: "/videos",
    element: <p>Videos</p>
  }
])

// 화면 출력
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
);

화면 렌더링

react router에서 제공하는 Link를 통해 화면 렌더링을 할 수 있다. a태그와 비슷하지만 Link는 데이터를 받아온다.

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

export default function Navbar() {
  return (
    <nav>
      <Link to='/'>Home</Link>
      <Link to='/board'>Board</Link>
    </nav>
  )
}

화면의 부분 렌더링 (Outlet)

만약 화면 내에서 특정 부분만 업데이트 하고 싶다면 react router에서 제공하는 Outlet을 사용하면 된다.

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';
import Error from './pages/Error';
import Board from './pages/Board';
import Root from './pages/Root';

// Root컴포넌트 내부에서 페이지들의 렌더링을 원한다면 children으로 컴포넌트를 전달하면 된다.
// root는 index: true
const router = createBrowserRouter([
  {
    path: "/",
    element: <Root/>,
    errorElement: <Error/>,
    children: [
      {index: true, element: <Home/>},
      {path: '/board', element: <Board/>},
    ]
  }
])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
);

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

// Outlet을 통해 Outlet컴포넌트 내에서 children로 전달한 페이지 컴포넌트들이 렌더링이 된다.
export default function Root() {
  return (
    <div>
      <Navbar />
      <Outlet />
    </div>
  )
}

동적 렌더링 (params)

// Root.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';
import Error from './pages/Error';
import Board from './pages/Board';
import BoardDetail from './pages/BoardDetail';
import Root from './pages/Root';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root/>,
    errorElement: <Error/>,
    children: [
      {index: true, element: <Home/>},
      {path: '/board', element: <Board/>},
      // boardId를 key값으로 받는다.
      {path: '/board/:boardId', element: <BoardDetail/>}
    ]
  }
])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
);

useNavigate

// Board.jsx
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

// 단순한 페이지 이동은 Link를 사용하면 되지만 특정 이벤트가 실행됐을 때 동작하도록 하거나 추가적인 로직이 필요한 경우 useNavigate를 사용하는 것이 좋다.
export default function Board() {
  const [text, setText] = useState('');
  const navigate = useNavigate();
  const handleChange = (e) => {
    setText(e.target.value)
  }
  const handleSubmit = (e) => {
    e.preventDefault();
    setText('');
    navigate(`/board/${text}`);
  }

  return (
    <div>Board
      <form onSubmit={handleSubmit}>
        <input type="text" placeholder="board id: " value={text} onChange={handleChange} />
      </form> 
    </div>
  )
}

useParams

// BoardDetail.jsx

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

// useParams를 통해 파라미터 정보를 가져올 수 있다.
export default function BoardDetail() {
  const {boardId} = useParams();
  return (
    <div>{boardId}</div>
  )
}