[React] 상품 상세페이지 만들기2 : postman id 설정

 

 

1. 상세페이지 구분을 위해 id 설정하기

지금까지 postman을 이용해 상품 정보를 쏘고 있었는데, 각자 다른 상세페이지를 열어주기 위해 각 상품마다 id를 고유하게 부여한다.

 

이렇게 get요청을 보내면 잘 오는 것을 볼 수 있다.

상세페이지의 url products/1, products/2 이런식으로 줄 것이다.

 

 

2. id 1번 아이템의 상세 페이지를 만들자

새로운 request를 추가해 products/1이라는 상세페이지에 꽂힐 데이터 정보를 만들어 줄 것이다.

 

json 형식으로 1번 id의 정보를 넘겨준다.

 

 

3. 상세 페이지 경로 수정

[main > index.js]

상세페이지 경로는 to 부분이다.

to 부분에 임의로 map 함수의 index를 줬었는데, 이제는 products의 고유한 id를 상세페이지 url로 넘겨야한다.

 

때문에 product가 가진 id로 수정한다.

 

 

4. 상세 페이지 네트워크 통신 수정

 

[product > index.js]

import {useParams} from "react-router-dom";
import axios from "axios";
import { useEffect, useState } from "react";
function ProductPage(){
    const {id} = useParams();
    const [product, setProducts] = useState(null);//product는 처음에 null이 들어간다.

    // useEffect로 딱 한번만 불리게 써줘야한다. 안써주면 렌더링을 할 때마다 네트워크 요청이 계속 간다.
    useEffect(function(){
        axios.get(`https://포스트맨 개인서버/products/${id}`).then(
            function(result){
                setProducts(result.data);
                //console.log(result);
        }).catch(function(error){
            console.error(error);
        });
    },[])//useEffect의 값을 []로 비워두면 1번만 실행된다.
    console.log(product);
    return <h1>상품 상세 페이지 {id} 상품</h1>
}

export default ProductPage;

 

추출한 id에 맞는 네트워크 요청을 해야한다. 이 때 axios를 사용한다.

 

그 전에 product라는 곳에 추출한 id 정보를 받아올 건데, 첫 값은 null로 설정될 수 있게끔 한다.

useState를 이용해 product에 null을 넣어주고, axios 통신을 통해 id에 맞는 정보를 가져오면 setProducts(result.data)를 통해 product에 상품을 저장한다.

 

이렇게 가져온 값을 가지고 return 부분에 페이지를 꾸며야한다.

 

---

월요팅~