React Router Hooks

React Router 에서는 자체적으로 여러가지 Hook을 제공한다.

https://reactrouter.com/en/main (참고)

이 글에서는 아래 useParams Hook에 대해서 알아보겠다.

useParams

URL 파라미터 정보를 가져와 활용 할 경우 사용한다.

path={'/param1/(가변 데이터)'} 일 경우 가변 데이터는 어떻게 선언하고 받아와야 할까??

1. 소문자 카멜케이스로 가변 데이터 이름 선언

 <Route path={'/param1/:id'} element={<ParamComp1/>}/>

2. 해당 컴포넌트에 useParams() 객체 선언

  const {id} =useParams()

❗ (가변 데이터) 과 위에서 선언한 객체 이름이 같아야 한다.

useParams 예제

App.jsx 코드

function App() {
 const Linkpage=()=>{
   return(
   <>
     <Link to='/home/11'>Home11</Link>
     <Link to='/home/22'>Home22</Link>
     <Link to='/home/33'>Home33</Link>
     </>
   )
 }

 return (
   <div>
     <Linkpage/>
     <Routes>
       <Route path='/' element={<Intro/>}/>    
       <Route path='/home/:id' element={<Home/>}/>
     </Routes>
 </div>
 )
}

위 코드에서 가변 데이터 이름을 id로 설정하였다.

Home 컴포넌트 코드

function Home() {
   const {id} = useParams()
   return (
       <div>
           <h3>이것은 Home</h3>
           <h1>현재 파라미터 : {id}</h1>
           
       </div>
   )
}

useParams를 이용해 상위 컴포넌트에서 파라미터를 받아온다.
home/ 뒤로 오는 가변 데이터를 id 라는 이름으로 저장해 사용할 수 있다.