React환경에서 useParams를 활용하여 Dynamic Routes 구현하기

*여러 방법이 있었지만, 시간 관계상 빠른 결과물을 구현하는 것이 목적이여서 야매 방법을 차용함.

https://velog.io/@mjhyp88/ReactTypescript-Layout-Componentwith.-react-router-dom-v6
https://devbirdfeet.tistory.com/116
https://velog.io/@nemo/useParams
https://byul91oh.tistory.com/467

환경설정

- react 18.2 
- react-dom 18.2
- react-router-dom 6.11

App

import "./App.css";
import Layout from "./components/Layout/Layout";
import { Routes, Route } from "react-router-dom";
import MyScreen from "./pages/MyScreen";
import MainPage from "./pages/MainPage";

function App() {
  return (
    <div>
      <Routes>
        <Route element={<Layout />}>
          <Route index element={<MainPage />} />
        </Route>
        <Route path="/:name" element={<MyScreen />} />
      </Routes>
    </div>
  );
}

export default App;

MyScreen

import React from "react";
import { useParams } from "react-router-dom"; // 1. useParams 라는 기능을 임포트한다.

const MyScreen = () => {
  const { name } = useParams();
  console.log(name); //    url 에 /1 로 찍히면 useParams 으로 1을 읽어온다.

  return (
    <div>
      <h2> {name}</h2>
    </div>
  );
};

export default MyScreen;

useParams

useParams는 React Router 라이브러리에서 제공하는 Hook 중 하나로, URL의 동적 파라미터를 가져와서 사용할 수 있게 해줍니다.

시나리오 순서는 다음과 같다.

1. 메인페이지 

2. 회원가입 

3. 이름으로 로그인

4. localhost:3000/이름 형식으로 띄면 된다. 

그래서 이름을 저장하는 useState를 사용하여 로그인 버튼 클릭 시 history.push()를 사용하여 해당하는 페이지로 이동할 수 있게 해준다.