URL Parameter

일반적으로 게시판, 쇼핑몰 목록 등의 경우 각 항목에 대한 제목을 클릭한 경우 해당 하위 카테고리 url에 해당 항목에 대한 id로 페이지 url이 구성된다. 이처럼 id별로 페이지 url을 따기 위해 사용하는 것이 URL Parameter이다.

---

// detail 카테고리에 id별 url을 route하는 경우
<Route path='/detail/:id' element={ <DetailPage goods={ goods } /> } />

path에 :param_name을 지정해주면 해당 param_name으로 url이 구성된다.

위 예제에서는 /detail/id 를 호출하면 DetailPage 컴포넌트를 호출하게 된다.

---

DetailPage 컴포넌트에서는 호출된 url parameter에 따라 요청된 정보를 보여준다.

function DetailPage (props) {
  // useParams를 통해 URL Parameter 값을 파악한다.
  let { id } = useParams();
  
  // 전달받은 props와 URL Parameter 값을 사용해 보여줘야할 정보를 가져오고 사용자에게 보여준다.
  let shoes = props.shoes.find(x => x.id == id);
  if (shoes == null)
    return(
      <NotFound/>
    );
  else
    return(
    <div className="container">
      <div className="row">
        < div className="col-md-6">
          <img src={ shoes.photo } width="100%" />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">{ shoes.title}</h4>
          <p>{ shoes.content}</p>
          <p>{ shoes.price} 원</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div> 
  );
}

function NotFound() {
  return(
    <h3>페이지를 찾을 수 없습니다.</h3>
  )
}