React : URL에 따라 상품상세정보 보여주는 방법 (useParams 사용)

상품상세정보를 만들려고하면 우리는 고객이 해당 주소를 검색하거나 혹은 해당 상품을 눌렀을때 해당 제품이 보여지게 해야한다.

먼저 머릿속으로 정리를 해본다.

 

1. 상품데이터를 API로 받을때 id값을 같이받는다.

2. URL파라미터 문법을 사용해 페이지를 여러개 만들수 있게 만들어둔다.

3. 상품 컴포넌트 안에 데이터를 가져오는 배열 index에 해당 아이템의 id 값을 넣어준다.

 

추가 조건

+ 상품 id 와 동일한 URL을 적었을때 해당 상품을 보여주게 한다.

 

 

1. 상품데이터를 API로 받을때 id값을 같이받는다.

우리는 마지막에 저 id의 숫자를 URL에 입력했을때 해당 상품이 뜨게 할것이다.

 

 

2. URL파라미터 문법을 사용해 페이지를 여러개 만들수 있게 만들어둔다.

path='/detail/:id' < URL파라미터 문법을 사용해서 사용자가 /detail/[아무숫자]를 입력해도 접속이 가능하게 만들어두자.

우리는 저 id를 index값으로 이용할 것이다.

 

 

3. 상품 컴포넌트 안에 데이터를 가져오는 배열 index에 해당 아이템의 id 값을 넣어준다.

import React from 'react';
// ✨ 중요포인트!
import { useParams } from 'react-router-dom';



const Detail = ({shoes}) => {

// ✨ 중요포인트!
const {id} = useParams();

    return (
        <div>
            <div className="container">
                <div className="row">
                    <div className="col-md-6">
                        <img src={shoes[id].img} width="100%" /> // ✨ 중요포인트!
                    </div>
                    <div className="col-md-6">
                        <h4 className="pt-5">{shoes[id].title}</h4> // ✨ 중요포인트!
                        <p>상품설명</p>
                        <p>{shoes[id].price}</p> // ✨ 중요포인트!
                        <button className="btn btn-danger">주문하기</button> 
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Detail;

원래는 shoes[0].img 배열안에 숫자가 들어가있었지만 이렇게 작성하면 우린 디테일 컴포넌트를 상품갯수만큼 생성해야한다.

하지만 저 숫자가 자동으로 변하게 만들어준다면 우린 한컴포넌트에 여러상품을 보여줄수있다.

 

하지만 현재 우리는 map을 돌리고 있는 것도 아니기때문에 인자값으로 index를 주는것이 불가능하다

그렇기 떄문에 useParams를 사용해야하고 useParams 는 사용자가 작성하는 URL값을 가져올수있다.

 

사용자가 /detail/1 을 작성하면 숫자 1을 가져올수있기 때문에 이걸 index값으로 사용하면 되는것이다.

params값을 받아와 그걸 index로 이용하니깐 해당 번호를 적었을때 해당 배열값이 들어오게되고

만약 배열 값보다 더 높은 값이 작성 되면 빈화면이 뜨게된다.

 

 

+ params 값이 아닌 data id값으로 상세페이지를 접근하려면 ??

???굳이 왜 우리는 id값으로 상세페이지를 접근해야되??

 

만약 필터를 통해 [낮은가격순] [높은가격순] [판매순] [후기순] 등 배열의 순번이 바뀌게되면?? 보여지는 상품역시 달라지게된다.

그래서 우리는 안전하게 데이터의 id값으로 설정해주는 것이 좋다.

 

import React from 'react';
// ✨ 중요포인트!
import { useParams } from 'react-router-dom';



const Detail = ({shoes}) => {


const {id} = useParams();
// 중요포인트✨
const selectItem = shoes.find((item)=>{
    return item.id == id
})

    return (
        <div>
            <div className="container">
                <div className="row">
                    <div className="col-md-6">
                        // <img src={shoes[id].img} width="100%" /> 
                        	<img src={selectItem.img} width="100%" /> // 중요포인트✨
                    </div>
                    <div className="col-md-6">
                        // <h4 className="pt-5">{shoes[id].title}</h4> 
                       	    <h4 className="pt-5">{selectItem.title}</h4>// 중요포인트✨
                        <p>상품설명</p>
                        // <p>{shoes[id].price}</p> 
                        	<p>{selectItem.price}</p>// 중요포인트✨
                        <button className="btn btn-danger">주문하기</button> 
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Detail;

slectItem 변수에 함수를 담았는데

const selectItem = shoes.find((item)=>{

⬆️ 여기서 find는 배열에서 사용할수있는 메서드이고 배열안에 원하는 항목을 찾을 수 있다.

함수안에서 인자로 들어오는 (item)은 배열안에 있던 자료를 뜻한다.

return item.id == id

⬆️ item.id == id 라는 조건식은 배열에서 id와 == url에입력한번호가 같은경우 변수에 담아준다.

 

테스트를 위해 data 에서 id값을 변경했다.

 

⬇️ 이게 fint(item)에서 item이다.

이게 find(item) 에 item인 것이다.

✅ 2번째 배열의 상품을 보여주는게 아니기 때문에 

상품 정보가 뜨지 않는다.

 

 

 

 

 

 

 

 

✅  data.id 가 6번인 상품이 뜨게된다.