React axios swiper 데이터뿌리기

앞서 React 와 express 를 연결시킨 뒤 axios로 api 데이터를 받아와 콘솔로 찍어보았다.

그리고 받아온 데이터를 swiper 로 렌더링 시켜보았다. 

 

1. useEffect 로 로드되었을때 데이터를 받아와 useState 값에 넣어준다.

const [item, setItem] = useState([]);

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

setItem 에 데이터를 넣어준뒤 item에 데이터가 잘들어갔나 콘솔을 찍었는데 자꾸 안들어 가서 한참 버벅였다..

콘솔도 찍어보고 return도 div에도 넣어보고 했는데 안되어서 map()함수로 일단 작성해보자 하고 시도했는데 잘되었다...

왜지..왜..일단 되니까 너무 좋았다 ㅋㅋㅋ...

 

 

2. swiper 에 적용하기 

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.map((item) => (
          <SwiperSlide className={css.slide_item} key={item.id}>
            <Link to="/Itemlist">
            <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>
    </>
  )
}

이미지를 어떻게 불러올지 고민했다. 로컬이라 그냥 퍼블릭 폴더에 넣고 URL을 불러왔다.

나중에 배포할 때 수정이 필요할 것 같다.. 혼자 공부하면서 하려니 이렇게 하는게 맞나싶다..

어찌됐든 스와이퍼가 잘 만들어졌다.

이 다음엔 아이템을 클릭하면 파라미터를 가지고 페이지를 이동하는 것을 공부해 볼 것이다.