useParams()를 이용해서 파라미터를 가져오자(React Hook, react-router-dom)

리액트에서 라우터를 사용하게 되면서 파라미터 정보를 가져와서 활용해야 할 때가 있다.

여기서 사용하는 훅은 useParams

 

사용하기 위해서는 리액트 라우터 설치 필수이다.

npm react-router-dom

 

useParams() 사용법

1. useParams import

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

 

2. useParams 정보를 변수에 저장

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

function Detail() {
  const {id} = useParams();
  return <h1>Detail</h1>;
}
export default Detail;

 

3. 파라미터 값 사용

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

function Detail() {
  const {id} = useParams(); 
  
  return (
  	<div>
       <p>현재 페이지 파라미터는 {id} 입니다.
    </div>
  );
}
export default Detail;

 

(여기서 저 id의 정체는, 미리만들어준 app.js에 있는 경로에 붙혀진 놈이다.)

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="/movie/:id" element={<Detail />}></Route>{' '}
        {/*react router에게 여기서 오는 id값이 뭔지 알고 싶다 말하는 것*/}
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

export default App;

 

 

결과물 ▽