여러 페이지 만들기 router활용

지금까지 /detail하나만 상세페이지로 만들었는데, 이제는

/detail/0 으로 접속하면 0번째 상품을

/detail/1 로 접속하면 1번째 상품을

/detail/2 로 접속하면 2번째 상품을 보여주게 만들어보자. 

 

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

Route를 path경로를 바꿔가며 만들 필욘없고, 비슷한 Route가 있으면 :id를 이용해서 조정할 수 있다.

:은 아무 문자가 오던간에 페이지로 이동시켜달란 URL작명법이다.

<Route path="/detail/:id">//id는 파라미터라 그냥 id라 적은거임 아무이름으로 적어도 상관없음
        <Detail shoes={shoes}/>
</Route>

그런 다음, detail페이지에 라우터의 useParams훅을 이용해보면

import React, {useState} from 'react';
import { useHistory, useParams } from 'react-router-dom';


function Detail(props) {

    let { id } = useParams(); //{사용자가 입력한 URL파라미터}가 생김 그걸 id라는 변수로 만든거
    let history = useHistory();

	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[id].content}</p>
            <p>{props.shoes[id].price}원</p>
            <button className="btn btn-danger">주문하기</button> 
            <button className="btn btn-danger" onClick={ () => { history.goBack(); } }>뒤로가기</button> 
          </div>
        </div>
      </div>
    )
}

export default Detail;

상단에 useParams를 import해주고 , let {id} = useParams(); 을 적어주면 useParams()에 {입력한 URL}형태로 남게 된다. 디스트럭팅 문법을 이용해 {id}에 담아주고 detail/1을 입력하면 id에 1이 detail/2를 입력하면 id에 2가 오게끔 하면 된다.

 

하지만, 이렇게 했을 때 만약, 상품이 정렬되어 순서가 바뀌면 detail/0이 0번째 상품이 아니게 될 수 있다. 그래서,

{
      id : 0,
      title : "White and Black",
      content : "Born in France",
      price : 120000
    },
  
    {
      id : 1,
      title : "Red Knit",
      content : "Born in Seoul",
      price : 110000
    },
  
    {
      id : 2,
      title : "Grey Yordan",
      content : "Born in the States",
      price : 130000
	}

json파일에 있는 id를 활용해 상세페이지를 상품에 지정되어 나타나게끔 할 수 있다. 

 

let 찾은상품 = props.shoes.find(function(상품) { //find파라미턴 어레이의 데이터의미 즉, shoes가 상품임
      return 상품.id == id//조건식 shoes즉,상품에서 id가 입력한URL id와 같은 shoes를 가져옴
});

//find는 어레이 뒤에 붙이며, 어레이 안에서 원하는 자료를 찾고싶을 때 사용함.

이렇게 적은 후, 찾은상품.title하면 입력한 URL의 id와 동일한 id를 가진 상품을 가져오게 된다.