쿼리스트링과 useParams 사용해 원하는 정보만 받아오기

현재 상품의 카테고리에 맞는 추천 상품 리스트 노출하기

상품 리스트를 불러올 때도 쿼리스트링을 이용했지만 그땐 path를 하드코딩으로 입력했었다.

이번에는 쿼리스트링을 변수로 처리해보았다. 전체를 다 쿼리스트링을 이용할 수도 있지만

이번에는 무조건 카테고리값만 가져올 것이고 카테고리의 id 값만 변경되기 때문에 좀 더 수월하게 작업할 수 있었다.

 

먼저 데이터를 받아올 usState를 선언한다. 그리고 useEffect 안에 fetch 함수를 호출한다. 

이때 api의 end point는 products/list 까지이고 물음표 이후로는 쿼리스트링이다.

백엔드에서 보내준 쿼리스트링 중 이번에 사용할 것은 세가지다.

데이터를 몇번째부터 불러올지 결정하는 offset, 몇개까지 노출할지 결정하는 limit, 마지막으로 카테고리 id 이다.

 

offset, limit은 모두 고정값이고 cathegory는 value만 바뀔 것이기 때문에 변수처리를 해주었다.

상품상세 페이지에서 불러온 단일상품의 카테고리와 같은 다른 상품들을 노출시킬 것이기때문에

단일상품의 카테고리 id를 변수로 넣어주었다.

당시에 구현할 땐 무조건 0번부터 4번까지만 보여줘서 좀 아쉬웠는데 다음에 기회가 된다면 랜덤 노출도 구현해보고싶다.

const [carouselDatas, setCarouselData] = useState([]);
 
useEffect(() => {
    fetch(
      `API_URL/products/list?offset=0&limit=4&category=${product.productCategoryId}`
    )
      .then(response => response.json())
      .then(result => setCarouselData(result.data));
  }, [product]);

 

그리고 받아온 데이터를 저장한 caroselDatas를 map을 통해 데이터를 나열해주었다.

limit=4, offset=0 로 데이터를 받아왔지만 혹시나하는 마음에 slice를 통해 4개의 상품만 노출할 수 있도록 구현했다.

   {carouselDatas?.length > 0 &&
            carouselDatas.slice(0, 4).map(ele => {
              return (
                <Product key={ele.id} data={ele} width={200} height={200} />
              );
            })}

 

 

useParams 사용해 단일상품의 정보 가져오기

먼저 route.js 파일에서 path를 변경해준다.

상품상세페이지 파일은 1개이지만 우리는 이 페이지 하나로 여러 아이템의 상세페이지를 구현할 것이다.

기존의 path를 productDetail이라고 정해두었는데 간단하게 /:변수명을 추가해준다.

우리는 상품의 id값으로 데이터를 호출했기 때문에 간다하게 변수명을 id로 정했다.

//router.js

<Route path="productDetail/:id" element={<ProductDetail />} />

그리고 상품상세페이지로 가서 아까 route.js 파일에서 설정했던 id 값을 가져오기 위해 useParams hook을 불러온다.

//상품상세페이지

const params = useParams();
const productID = params.id;

params 라는 변수를 useParams에 할당을 하고 console.log를 찍어보면 아래와 같이 나온다.

객체로 되어있는 params의 id 값에 접근해 productID에 할당해준다.

 

그리고 변수 productID를 end-point에 넣어주고 받아온 데이터를 useState product에 넣어준다.

//상품상세페이지

const [product, setProduct] = useState({});
 
useEffect(() => {
    fetch(`API_URL/products/${productID}`)
      .then(response => response.json())
      .then(result => setProduct(result.data));
  }, [productID]);

데이터가 저장되어있는 product 객체를 통해 데이터를 나열한다.

//상품상세페이지

<p className="titleName">{product?.productName}</p>
<img src={product?.productThumbnailImage} />

마지막으로 상품상세페이지로 들어갈 수 있는 main 페이지, list 페이지,

우리 사이트에서는 추천상품 목록에 Link 태그를 통해 path를 넣어준다.

path에는 아까 useParams를 통해 지정해둔 변수를 추가적으로 넣어주면 된다.

//main, list관련 페이지

<Link to={`/productDetail/${productId}`}>
 <p>{productName}</p>
</Link>