[shop-project] 상세페이지 만들때 Tip

🌈 useParams()

• 리액트 훅(hook)의 일종이다. (= Router 라이브러리)
• useParams() 라는 함수는 현재 URL에 적힌 모든 파라미터를 {파라미터1,파라미터2} 이런 식으로 저장해주는 함수
• useParams() 함수를 destructuring 문법을 이용해서 따로따로 변수로 빼서 저장한다
  ➡ let {id} = useParams()
  (즉, {id} 라는 변수는 url에서 :id 자리에 있던 숫자를 의미한다.
  /detail/1로 접속하면 id라는 변수는 1이 되고,
  /detail/100 으로 접속하면 id라는 변수는 이제 100이 된다.)

🐻 상세페이지에 url/:id에 따라 각각 다른 상품을 보여주기

// App.js
import React, { useState, useContext } from 'react';  

function App(){
  return (
    <div>
      // 나머지 html 생략

        // 상세페이지(Detail) 컴포넌트 불러오기
        <Route path="/detail/:id">
          <Detail shoes={shoes}/>
        </Route>
    </div>
  )
}
❗ 경로 설정 할 때, 각각의 상품 id에 따라 다른 페이지가 불러질 수 있도록 경로 뒤에 :id를 붙여준다.
이제 "/detail/1234" 아무거나 입력해도 <Detail> 컴포넌트를 보여준다.
그러나 특정 상품에 대한 id를 보여줘야 하기 때문에
/detail/0으로 접속하면 0번째 상품명
/detail/1으로 접속하면 1번째 상품명
이렇게 되어야 한다. 따라서 <Detail/> 컴포넌트 안에 데이터바인딩을 아래와 같이 설정해주어야 한다.



// Detail.js
❗ useParams() 훅 사용하기
import React from 'react';
import { useHistory, useParams } from 'react-router-dom';  // import 해주기

function Detail(props) {

let { id } = useParams();  // useParams() 훅을 변수에 저장한다

 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>  // index로 id 담아주기
          <p>{props.shoes[id].content}</p>
          <p>{props.shoes[id].price}원</p>
          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
  </div>  
  )
};

export default Detail 

❗ 그러나, 자료의 순서가 변경되면 상세페이지도 고장나는 문제가 있을 수 있다.
  따라서 특정 상품의 id가 index와 일치할 때만 해당 페이지를 보여줄 수 있도록 조건을 설정해주어야 한다.



function Detail(props){

  let { id } = useParams();
  // 자바스크립트 find라는 ES6신문법 활용해서 Array안에서 원하는 자료를 뽑아서 변수에 담기
  let 찾은상품 = props.shoes.find(function(상품){   // props로 받아온 shoes에서 find설정
    return 상품.id == id    // shoes의 id 가 id(useParams의 파라미터 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>  
  )
};