[myCart] 카테고리 별 상품 출력

 

카테고리를 클릭하면 카테고리에 해당되는 상품만 상품목록에 출력하게 만들거임

 

카테고리 link 는 아래와 같다.

  link={`/products?category=${category.name}`}

 

 

category name이 쿼리스트링으로 전달된다.

 

 

ProductsList.jsx에서 쿼리스트링을 받는다.

  //sidebar에서 카테고리 쿼리스트링을 받아온다.

  const [search, setSearch] = useSearchParams();

  const category = search.get("category"); //모든 쿼리스트링 중 카테고리

 

const ProductsList = () => {

  //sidebar에서 카테고리 쿼리스트링을 받아온다.

  const [search, setSearch] = useSearchParams();

  const category = search.get("category"); //모든 쿼리스트링 중 카테고리

  //useDate(url)이 들어가야함

  //결과(res)는 categories와, error에 담는다.

  const { data, error, isLoading } = useData(

    "/products",

    {

      params: {

        category, //카테고리 파라미터 전달

      },

    },

    [category]

  );

 

요청 주소외에 파라미터가 있으면 객체 형식으로 받는다. 

 

 

 

useData.js

 

import { useEffect, useState } from "react";

import apiClient from "../utils/api-client";

const useData = (endpoint, customConfig, deps) => {

  const [data, setData] = useState([]);

  const [error, setError] = useState("");

  const [isLoading, setIsLoading] = useState(false);

  useEffect(

    () => {

      apiClient

        .get(endpoint, customConfig)

        .then((res) => {

          setData(res.data);

          setIsLoading(false);

        })

        .catch((err) => {

          setError(err.message);

          setIsLoading(false);

        });

    },

    deps ? deps : []

  ); //deps가 있으면 카테고리가 바뀔때마다 랜더링됨

  return { data, error, isLoading };

};

export default useData;

 

url- > endpoint 

 

customConfig -> 두번째 파라미터 

​

dep -> category

useEffect에 카테고리가 있을경우 [category] 가 바뀔때마다 다시 리렌더링하고

카테고리가 없으면 [ ] 시작할때 한번 렌더링.

 

테스트한다 . 선택한 카테고리에 맞게 잘 출력되는지