[react] react-router (리액트 라우터) useParams()

useParams hook을 사용해서 URL Parameter에서 전달받은 값을 데이터바인딩 해보자.

상품 상세페이지에 대한 예제를 들어보겠다.



만약 상품이 무수히 많다고 가정할때

<Route path="/detail/1" element={<Detail shoes={shoes}/>} />
<Route path="/detail/2" element={<Detail shoes={shoes}/>} />
<Route path="/detail/3" element={<Detail shoes={shoes}/>} />

상세페이지를 이렇게 하나 하나 자의적으로 만드는것이 얼마나 힘들겠는가
이럴 경우에 useParams hook을 사용한다면 편하다.

ex)

data.js (상품 데이터)

let data = [
    {
        id: 0,
        title: 'White and Block',
        content: 'Born in France',
        price:  `120,000원`
    },
    {
        id: 1,
        title: 'Red Knit',
        content: 'Born in Seoul',
        price:  '100,000원'
    },
    {
        id: 2,
        title: 'Grey Yordan',
        content: 'Born in the States',
        price:  '150,000원'
    }
]

App.js

import data from './data.js'
function App() {
  let [lists, setLists] = useState(data);
  <Route path="/detail/:id" element={<Detail lists={lists}/>} />
}

url파라미터

:id자리에 어떤 문자가 입력되면 그 URL로 이동한다. (id 말고 다른 작명 가능)

ex)
주소창에 www.hd.com/detail/01라고 입력시

www.hd.com/detail/01 URL경로로 이동하고 Detail컴포넌트에 의해
상세 페이지를 보여준다.

서로 다른 상품을 보여주어야 하기 때문에 useParams()를 사용한다.
detail/01,02,03......

Detail.js (상세페이지)

import { useParams } from 'react-router-dom';
function Detail(props) {
    let {id} = useParams()
    let findProduct = props.lists.find( (x) => {return x.id == id})
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                    <img src={`https://khd.github.io/shop/lists${Number(id) + 1}.jpg`} width="100%" />
                </div>
                <div className="col-md-6">
                    <h4 className="pt-5">{findProduct.title}</h4>
                    <p>{findProduct.content}</p>
                    <p>{findProduct.price}</p>
                    <button className="btn btn-danger">주문하기</button>
                </div>
            </div>
        </div>
    )
}

Detail컴포넌트 안에 useParams hook을 생성하고 변수에 담아준다.
변수명은 {url파라미터 작명} 해주면 된다.

그렇다면 사용자가 입력한 URL에 따라서
data.js에 있는 상품 list중 상세페이지로 보여줄 수 있다.

ex)

www.hd.com/detail/0을 주소창에 입력 했을 경우
id = 0이므로
props.lists[id].price가 되어 보여준다.

사용자가 입력한 URL의 특정부분 값을 useParams를 통해 변수에 저장하고
그 변수로 어떤 data값을 보여줄지 결정해준다.