React Swiper.js Swiper 컴포넌트 바깥에서 useSwiper()훅 사용하는 법

Swiper useSwiper()훅

useSwiper()훅은 Swiper 컴포넌트 내부에서 사용할 수 있는 훅으로, Swiper에 관련된 메서드를 제공합니다. 그런데 Swiper 컴포넌트 외부에서는 어떻게 불러올 수 있을까요?

기존 Swiper 컴포넌트 내부에서 사용하는 방법

아래 코드와 같이 버튼 컴포넌트를 하나 만듭니다.

컴포넌트 내부에 useSwiper()훅을 불러와 메서드를 사용한 다음, 버튼 컴포넌트를 Swiper 컴포넌트 내부에 불러옵니다.

import { useSwiper } from "swiper/react";

export default function SlideNextButton() {
  const swiper = useSwiper();
  return (
    <button onClick={() => swiper.slideNext()}>Slide to the next slide</button>
  );
}

Swiper 컴포넌트 외부에서 사용하는 방법

useRef()훅을 이용하여, Swiper내부를 가리킬 수 있게 만듭니다.

onSwiper 메서드를 이용하여 Swiper가 마운트 될 때 실행 될 수 있게 만듭니다.

// Import Swiper styles
import "swiper/css";

import "./styles.css";

export default function App() {
  const swiperRef = useRef();
  return (
    <>
      <Swiper
        onSwiper={(swiper) => {
          swiperRef.current = swiper;
        }}
        className="mySwiper"
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>

      <button onClick={() => swiperRef.current.slideNext()}>
        Go to Next Slide
      </button>
    </>
  );
}

 

How to use useSwiper outside a Swiper instance?

위의 글을 참고했습니다