[React] 리액트 라우터 : URL 파라미터

URL 파라미터로 여러개의 상세 페이지 만들기

<Routes>
    <Route path="/detail/0" element={ <Detail />} />
    <Route path="/detail/1" element={ <Detail />} />
    <Route path="/detail/2" element={ <Detail />} />
  </Routes>

여러개의 상세 페이지를 만들 때 <Route>를 여러개 작성하여 만들 수도 있지만 URL 파라미터 문법을 사용하여 간편하게 만들 수 있다.

<Route path="detail/:id" element={ <Detail /> }/>

path 작명할 때 /:변수 이렇게 사용하면 "아무 문자"를 뜻한다.

그래서 위의 <Route>는 사용자가 주소창에 /detail/아무 문자 입력했을 때 <Detail> 컴포넌트를 보여 달라는 뜻이다.

/detail/0

/detail/1

/detail/2

이렇게 접속해도 <Detail> 컴포넌트를 보여줄 수 있다.

useParams()

useParams()은 react-router-dom에서 제공하는 Hooks 중 하나로 파라미터에 입력한 값을 URL을 통해 넘겨받은 페이지에서 사용할 수 있도록 해 준다.

1. useParams를 import 한다.

2. useParams 정보를 하나의 변수에 저장한다.

3. 파라미터 값을 이용할 수 있다.

(App.js)

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

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

function Detail(){
  const { id } = useParams()
  return (
    <>
      <h4>{ id }번째 글입니다.</h4>
    </>
  )
}

export default App;

위 코드에서 보면 /detail/100은 파라미터가 100으로 '100번째 글입니다.라고 출력된다.