React 쇼핑몰(리액트 라우터: URL 파라미터)

URL 파라미터

먼저 만들어두었던 상세페이지에 상품명을 넣어보겠습니다.

shoes state의 상품 정보들을 props를 사용해 detail 컴포넌트에 넣는 것이 목표입니다.

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

(Components.js)
<div className="container>
  <div className="row">
    <div className="col-md-6">
      <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
    </div>
    <div className="col-md-6 mt-4">
      <h4 className="pt-5">{props.shoes[0].title}</h4>
      <p>{props.shoes[0].content}</p>
      <p>{props.shoes[0].price}원</p>
      <button className="btn btn-danger">주문하기</button>
    </div>
  </div> 
</div>

 

그런데, 이렇게 코드를 짜면 상품이 많아질 때마다 <Route>도 점점 많아집니다.

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

 

이럴 때, 사용할 수 있는 문법이 바로 URL 파라미터입니다.

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

path에서 '/:작명' 을 하면 /detail 뒤에 아무거나 입력했을 때 <Detail> 컴포넌트를 보여줍니다.

 

그리고 Detail 컴포넌트의 하드코딩했던 부분들을 확장성 있게 바꿔보겠습니다.

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

function Detail(){
  let {id} = useParams();
  console.log(id)
  
  return (
    <div className="container>
      <div className="row">
        <div className="col-md-6">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6 mt-4">
        <h4 className="pt-5">{props.shoes[id].title}</h4>
        <p>{props.shoes[0].content}</p>
        <p>{props.shoes[0].price}원</p>
        <button className="btn btn-danger">주문하기</button>
      </div>
    </div>
  </div>
  )
}

하드코딩했던 props.shoes[0] 을 url 파라미터에 맞춰서 변경하는 것이 목표입니다.

그러기 위해서 사용할 수 있는 것이 useParams 입니다.

상단에 uesParams을 임포트하고 컴포넌트에 id라는 변수에 저장하여 사용합니다.

그러면 /:url파라미터 자리에 입력했던 url파라미터 값을 가져올 수 있습니다.

 

주의 사항으로는 url 파라미터를 잘못 입력해서 없는 데이터 값을 가져오려고 할 때, 오류가 발생할 수 있습니다.

이런 오류는 if 문을 사용하여 해결할 수 있습니다.

 

그리고 상품 순서가 바뀌었을 때 상품 순서에 따라 url파라미터가 같더라도 페이지의 내용이 변경됩니다.

이런 문제는 저장했던 데이터의 고유 id를 가져와서 사용하면 해결할 수 있습니다. 

function Detail(props){

  let { id } = useParams();
  let 찾은상품 = props.shoes.find(function(x){
    return x.id+1 == id
  });

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src={`https://codingapple1.github.io/shop/shoes${id}.jpg`} width="100%" />
        </div>
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">{찾은상품.title}</h4>
          <p>{찾은상품.content}</p>
          <p>{찾은상품.price}원</p>
          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
  </div>  
  )
};

이렇게 find 함수를 사용해서 상품 고유 값이 url 파라미터와 같은 경우를 찾아서 데이터를 변수에 저장하고, 보여주는 방식을 참고할 수 있습니다.