[React] Dynamic Route, useParams, 중첩된 라우트(Outlet)

Dynamic Routes와 useParams

(1) Dynamic Routes 은 path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import Works from "../pages/Works";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>

				{/* 이렇게 하면 될까요? */}
        <Route path="/" element={<Home />} />
        <Route path="/works/1" element={<Works />} />
				<Route path="/works/2" element={<Works />} />
				<Route path="/works/3" element={<Works />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

(2) useParams 은 path의 있는 id 값을 조회할 수 있게 해주는 훅

페이지 컴포넌트를 모두 동일하게 렌더링하지만 useParams을 이용하면 같은 컴포넌트를 렌더링하더라도 각각의 고유한 id 값을 조회할 수 있다.
works/1로 이동하면 1 이라는 값을 주고, works/100으로 이동하면 100 이라는 값을 사용.

// src/pages/Work.js

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

const data = [
 { id: 1, todo: '리액트 배우기' },
 { id: 2, todo: '노드 배우기' },
 { id: 3, todo: '자바스크립트 배우기' },
 { id: 4, todo: '파이어 베이스 배우기' },
 { id: 5, todo: '넥스트 배우기' },
 { id: 6, todo: 'HTTP 프로토콜 배우기' },
];

function Work() {
 const param = useParams();

 const work = data.find((work) => work.id === parseInt(param.id));
// useParams로 가져오면 String타입이기에 parseInt로 Number타입으로 바꿔 일치연산자를 쓸수 있게 만든다.
 return <div>{work.todo}</div>;
}

export default Work;

---

중첩된 라우트에서 파생되는 Outlet

(1) 중첩라우팅
사용자 대시보드에 여러 섹션이 있는 경우 각 섹션 별로 다른 경로를 설정할 수 있습니다.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import DashboardLayout from './DashboardLayout';
import Profile from './Profile';
import Settings from './Settings';
import Reports from './Reports';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<DashboardLayout />}>
          <Route index element={<Profile />} />
          <Route path="settings" element={<Settings />} />
          <Route path="reports" element={<Reports />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

/dashboard/settings, /dashboard/reports 가 DashboardLayout 안에 자식요소로 들어갑니다.

(2) Outlet 컴포넌트
Outlet 컴포넌트는 중첩 라우팅 환경에서 부모 컴포넌트가 자식 경로의 렌더링 결과를 어디에 표시할지 결정할 때 사용

import { Outlet } from 'react-router-dom';

function Layout() {
  return (
    <div>
      <header>Header Section</header>
      <main>
        <Outlet />  
    {/* 여기에 자식 라우트의 컴포넌트가 
    (=/dashboard/settings, /dashboard/reports) 가 렌더링됩니다. */}
      </main>
      <footer>Footer Section</footer>
    </div>
  );
}