React 아이템리스트 카테고리 분류하기 map() filter()

이전에 aixos 로 데이터를 받아와 아이템리스트를 만드는데 성공했다.

아이템을 클릭하면 파라미터를 받아 상세페이지로 이동하거나 카테고리별로 아이템리스트를 필터하려고 한다.

필터함수로 카테고리를 분류해보았다.

 

category 를 0,1,2 이런식으로 분류하려다 그냥 스트링으로 해보았다.

 

카테고리가 베스트인 아이템만 골라 뿌려줬다.

import React, { useEffect, useState } from 'react'
import { Swiper, SwiperSlide } from "swiper/react";
import axios from "axios";

import { Pagination } from "swiper";
import css from '../../assets/css/main/mainslide.module.css';
import { Link } from 'react-router-dom';


export default function MainItemSlide() {
  const [item, setItem] = useState([]);

  useEffect(() => {
    const callApi = async () => {
    await axios.get("/api")
      .then((res) => {
        setItem(res.data.product)
    });
    };
    callApi();
  }, []);

  return (
    <>
      <Swiper
        slidesPerView={5}
        spaceBetween={30}
        loop={true}
        pagination={{
          clickable: true,
        }}
        modules={[Pagination]}
        className={css.topseller_slide}
      >
        {item.filter(item => item.category === "best").map((item) => (
          <SwiperSlide className={css.slide_item} key={item.id}>
            <Link to={`/Itemlist/${item.id}`}>
            <div className={css.thumb}>
              <img src={item.imageURL} alt="" />
            </div>
            <div className={css.text}>
                <p className={css.desc}>{item.desc}</p>
                <p className={css.name}>{item.name}</p>
                <div className={css.price}>
                    <span className={css.normal_price}>{item.price}원</span>
                    <span className={css.sale_price}>{item.sale_price}원</span>
                </div>
            </div>
          </Link>
          </SwiperSlide>
        ))}
      </Swiper>
    </>
  )
}

디자인은 같지만 카테고리가 다른 상품들이다.

이미지를 더 만들러 가야겠다 ㅋㅋ..

 

 

링크에 이런식으로 파라미터를 전달해준다. 라우터도 설정해준다.

하지만 아직 상세페이지를 만들지 못했다.

얼른 만들고 구현해봐야겠다.

<Link to={`/Itemlist/${item.id}`}>