React : URL 파라미터 (useParams)

URL 파라미터

상세페이지가 데이터에 따라 수백개가 필요한 상황이 생길 수 있다. 이 경우에 URL 파라미터를 사용하면 된다.

부모페이지

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

path 작명에서 '/:작명'을 입력하면 아무 문자를 뜻한다. 주소창에 /detail/작명 입력했을 때 <Detail>컴포넌트를 보여달라는 것이다.

---

자식(연결)페이지

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

function Detail(){
  let {id} = useParams();
  
  return (
    <div className="container>
      <h4 className="pt-5">{props.shoes[id].title}</h4>
      <p>{props.shoes[0].content}</p>
      <p>{props.shoes[0].price}원</p>
    </div>
  )
}

• useParams() 함수를 상단에서 import해온다.
  이 함수를 쓰면 현재 /:파라미터 자리에 유저가 입력한 값을 가져올 수 있다.
• 변수로 저장해서 쓴다.

---

출처 : 코딩애플 https://codingapple.com/