URL 파라미터

상세페이지에 상품명 넣어보기

(App.js)
<Route path="/detail" element={ <Detail shoes={shoes}/> }/> 

(Detail.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>

• shoes라는 state에 있던 상품정보들을 Detail 컴포넌트에 넣기
• shoes는 App 컴포넌트에 있으니 App -> Detail 이렇게 전송
• App.js 안에 <Detail> 쓰는 곳에서 일단 props 전송
• Detail 컴포넌트는 props 파라미터 등록해서 shoes를 자유롭게 사용
• shoes라는 state를 Detail.js 안에서 또 만들면 되지 않나?
  • 나중에 수정이 필요하면 두군데 수정해야돼서 잘 안 씀.
• 하지만 이건 단지 0번 상품의 상세페이지일 뿐

여러가지 상세 페이지

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

• 상품이 3개라고 할 때 3개의 상세페이지를 위해 이렇게 원초적인 방법으로 해도 되지만 상품이 100만개라면 불가능하다.

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

• 페이지를 여러개 만들고 싶을 땐 URL 파라미터라는 문법을 사용.
• path 작명할 때 '/:어쩌구' 이렇게 사용하면 "아무 문자"를 뜻한다.
• 위의 <Route>는 누군가 주소창에 /detail/아무거나 입력했을 때 <Detail> 컴포넌트 보여달라는 뜻
• 페이지는 여러개 만들어놨지만 접속해보면 다 똑같은 0번째 상품명만 보여준다.

페이지마다 다른 내용 보여주기

(Detail.js)

<h4 className="pt-5">{props.shoes[현재url에입력된숫자].title}</h4>
<p>{props.shoes[0].content}</p>
<p>{props.shoes[0].price}원</p>
<button className="btn btn-danger">주문하기</button>

• 0이라고 하드코딩해놨던 자리에 현재 url 파라미터에 입력된 숫자를 넣는다.

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>
  )
}

• useParams() 라는 함수를 상단에서 import 해오면 쓸 수 있다.
  • useParams : 현재 /:url파라미터 자리에 유저가 입력한 값을 가져올 수 있음
• 따라서 detail/1로 접속하면 id라는 변수에 1이 들어온다.
• path 작명 시 url 파라미터는 몇번이고 사용 가능하다.
  • 예) detail/:이렇게/:저렇게

자료의 순서가 변경되면 상세페이지도 바뀔텐데?

• 만약 상품 순서를 가나다순으로 변경하는 버튼을 만들었다고 가정
• 그걸 누르면 shoes라는 state 안의 상품이 가나다순으로 정렬된다.
• 그럼 state 배열 안의 순서가 바뀌어 원하는 상품이 안 나오게 될 수 있음 -> 이러한 불규칙해지는 문제 해결

(data.js)
[
  {
    id : 0,
    title : "White and Black",
    content : "Born in France",
    price : 120000
  },
  {둘째상품},
  {셋째상품}
] 

(Detail.js)

function Detail(props){

  let { id } = useParams();
  let 찾은상품 = props.shoes.find(function(x){
    return x.id == 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">{찾은상품.title}</h4>
          <p>{찾은상품.content}</p>
          <p>{찾은상품.price}원</p>
          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
  </div>  
  )
};

export default Detail

• shoes라는 상품 데이터 안에 id : 0 이라는 영구 번호를 사용하여 데이터 바인딩
• .find() 라는 문법을 사용하여 array 자료 안에서 원하는 항목만 찾아오기
  
  1. find()는 array 뒤에 붙일 수 있으며 return 조건식 적으면 된다. 그럼 조건식에 맞는 자료 남겨줌
  2. find() 콜백함수에 파라미터 넣으면 array 자료에 있던 자료를 뜻한다.
  3. x.id == id 라는 조건식을 써, array 자료.id == url에 입력한 번호일 경우 결과를 변수에 담아준다.
  4. 찾은 상품 1개를 html에 데이터 바인딩