(React) React에서 Swiper 사용하기

그래서 initialSlide를 추가했는데 3번째 프레임에서 뭔가 크래시가 나는 것처럼 계속 출력되고 있었습니다…

<Swiper
    initialSlide={1 : 몇 번째 이미지부터 출력}
    navigation={{
    	네비게이션 className(useRef로 했더니 에러 나서 className으로 지정했다.)
      prevEl: ".prevNav",
      nextEl: ".nextNav",
    }}
    slidesPerView={1 : 한 화면에 몇 개씩}
    centeredSlides={true : 이미지 가운데정렬}
    loop={true : 이미지 무한 슬라이드}
    onSwiper={setSwiper : 마운트 시 한 번만 실행}
    autoplay={{ delay: 3000, disableOnInteraction: false }: 자동 슬라이드 3초마다, 사용자가 슬라이드했어도 자동 슬라이드 유지 }
  >
  
    {/* 배너 이미지 */}
    {banners.map((bannerImg) => {
      return (
        <SwiperSlide key={bannerImg?.ban_id}>
          <Slide>
            <MainSlideImg
              src={이미지 주소}
              alt={이미지 설명}
            />
          </Slide>
        </SwiperSlide>
      );
    })}
    
    {/* 네비게이션 버튼 */}
    <SwiperNavWrap>
      <SwiperNavBox>
        <SwiperNavL className="prevNav">
          <img src={BannerArrow} alt="prev-arrow" />
        </SwiperNavL>
        <SwiperNavR className="nextNav">
          <img src={BannerArrow} alt="next-arrow" />
        </SwiperNavR>
      </SwiperNavBox>
    </SwiperNavWrap>
    
  </Swiper>

그래서 onSwiper={setSwiper}라는 속성을 추가했습니다.

onSwiper는 슬라이드가 화면에 처음 나타날 때 한 번만 실행됩니다.

슬라이드가 화면에 나타나면 slideTo를 사용하여 첫 번째 프레임으로 강제 이동했습니다.

swiper.slideTo(1, 0); 0초 동안 첫 번째(0번째가 아님) 프레임으로 슬라이드합니다.

0초 동안 실행되기 때문에 슬라이드가 깜빡이거나 움직이지 않고 배너 목록의 첫 번째 프레임으로 자연스럽게(사용자 모르게?) 이동합니다.

Swiper 구성 요소의 onSwiper는 setSwiper로 설정됩니다.

const (swiper, setSwiper) = useState(null);
const (banners, setBanners) = useState(());

// 배너 이미지 불러와서 banners state에 저장
  const getBannerList = () => {
    serverController.connectFetchController(`bannerlist?type=store`, "GET", null, (res) => {
      if (res?.result === 1) {
        setBanners(res?.list ?? ());
      }
    });
  };
  useEffect(() => {
    getBannerList();
  }, ());

// banners가 변경됐고, banners가 null이 아닐 때 실행
  useEffect(() => {
    if (swiper !== null) {
      swiper.slideTo(1, 0);
    }
  }, (banners));

전체 코드

import React, { useState, useEffect, useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import styled from "styled-components";
import BannerArrow from "../../img/icon/icon_bannerArrow.svg";
import "swiper/swiper-bundle.css";

import SwiperCore, { Pagination, Navigation, Autoplay } from "swiper";

export default function MainBenner() {
  SwiperCore.use((Pagination, Navigation, Autoplay));
  const (swiper, setSwiper) = useState(null);
  const (banners, setBanners) = useState(());

// 배너 이미지 불러와서 state에 저장
  const getBannerList = () => {
    serverController.connectFetchController(`bannerlist?type=store`, "GET", null, (res) => {
      if (res?.result === 1) {
        setBanners(res?.list ?? ());
      }
    });
  };

  useEffect(() => {
    getBannerList();
  }, ());

  useEffect(() => {
    if (swiper !== null) {
      swiper.slideTo(1, 0);
    }
  }, (banners));


  return (
    <Container style={{ background: "#000" }}>
        <BannerWrap className="MainBannerWrap">
          {
            <Swiper
              initialSlide={1}
              navigation={{
                prevEl: ".prevNav",
                nextEl: ".nextNav",
              }}
              slidesPerView={1}
              centeredSlides={true}
              loop={true}
              onSwiper={setSwiper}
              autoplay={{ delay: 3000, disableOnInteraction: false }}
            >
            
              {/* 배너 이미지 */}
              {banners.map((bannerImg) => {
                return (
                  <SwiperSlide key={bannerImg?.ban_id}>
                    <Slide>
                      <MainSlideImg
                        src={이미지 주소}
                        alt={이미지 설명}
                      />
                    </Slide>
                  </SwiperSlide>
                );
              })}
              
              {/* 네비게이션 버튼 */}
              <SwiperNavWrap>
                <SwiperNavBox>
                  <SwiperNavL className="prevNav">
                    <img src={BannerArrow} alt="prev-arrow" />
                  </SwiperNavL>
                  <SwiperNavR className="nextNav">
                    <img src={BannerArrow} alt="next-arrow" />
                  </SwiperNavR>
                </SwiperNavBox>
              </SwiperNavWrap>
              
            </Swiper>
          }
        </BannerWrap>
    </Container>
  );
}

https://swiperjs.com/react