[React] Hooks - useParams

• useParams는 React에서 Router 사용 시 해당 Route의 Parameter 정보를 가져와 활용하는 Hook이다.
• 코드로 예시를 들자면 다음과 같다. App.js에서 Router를 사용하여 Component 2개(Home, Detail)를 만들었다. Detail Component에는 Parameter 즉 Path에 "/:id"를 주었는데 이 Parameter 정보를 Detail Component에서 활용할 수 있다.

// App.js

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "../routes/Home";
import Detail from "../routes/Detail";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/:id" element={<Detail />} />
      </Routes>
    </Router>
  );
}

export default App;

• Detail Component에서 id값을 useParams를 통해 콘솔창에 찍어보면, 해당 Detail 페이지의 id값이 담긴 것을 볼 수 있다.

// Detail.js

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

function Detail() {
  const id = useParams();
  console.log(id); // {id: '1665059871166'}

  return <h1>Detail</h1>;
}
export default Detail;