[React] Using Swiper in React

회사에서 웹뷰 업무를 진행하면서 Swiper 라이브러리를 이용한 swipe 기능을 2번 써봤는데 담에 또 쓸 일이 있거나 나처럼 첨 써보는 사람들을 위한 간단한 사용법 정리해놓기!-!

먼저 내가 구현해야 하는 swipe 기능은 다음과 같았다

1.처음 Swiper 라이브러리를 이용했던 기능은 웹뷰 내 투표 TOP3 콘텐츠를 보여줘야 하는 부분이었고, 자동으로 3초씩 옆으로 스와이프 되며, 손가락으로도 좌우 스와이프 동작이 되어야 했다.
2. 두번째로 사용했던 기능으로는 웹뷰로 구성된 온보딩 즉, 처음 앱에 가입한 사람들에게 보여지는 화면을 구현해야 했다. 이 기능도 마찬가지로 손가락으로 좌우 스와이프 기능이 동작해야 했고, 로티 애니메이션 파일 실행이 종료된 후에는 자동으로 스와이프되어야 했다.

📚 먼저 설치 먼저 해주기!

npm i swiper

🍀 설치 했다면 import 해주기!

Swiper, SwiperSlide 기능을 React 에서 사용하기 위해서는 swiper/react에서 import 해주어야 하며,

Swiper의 속성인 modules에서 사용할 기능들에 대해서는 swiper에서 따로 import 해줘야 한다.

마지막으로 swiper/css 관련해서도 따로 import 해줘야 하는데
⚠️ 사용하는 기능의 스타일이 제대로 적용되지 않는다면 swiper/css/pagination과 같이 따로 또 import 해줘야 스타일이 제대로 먹힘 주의!

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper";

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/effect-fade";

✏️ Swiper, SwiperSlide 사용해주기

// 기본적으로 이렇게 Swiper 태그 안에 SwiperSlide 태그인 구조로 이뤄져야 함
<Swiper>
  <SwiperSlide />
</Swiper>


// 만약 스와이프되어야 할 슬라이드 화면을 배열로 지정한 후 SwiperSlide를 1번만 정의하고 싶으면
// 이렇게 map을 사용해서 여러 슬라이드 화면을 생성할 수 있음!
<Swiper>
  {arr.map((el) => {
    return <SwiperSlide key={el.key}>{el}</SwiperSlide>;
  })}
</Swiper>

// 나는 이런 식으로 SwiperSlide 태그 안에 각각의 화면 컴포넌트를 정의해서 key으로 구분해줬음
const arr = [
	<First key={0} />,
	<Second key={1} />,
	<Third key={2} />,
]

👀 Swiper 속성 사용하기

내가 swiper를 이용하여 구현했던 두가지 기능에서 사용한 속성을 짬뽕해서 정리해보자면 대략 아래 코드와 같다

<S.SwiperContainer
  modules={[Navigation, Pagination, Autoplay, EffectFade]}
  onSlideChange={(swiper) => setActiveIdx(swiper.activeIndex)}
  pagination={{ clickable: true }}
  loop
  ref={swiperRef}
  effect="fade"
  fadeEffect={{ crossFade: false }}
  centeredSlides
  slidesPerView={slidesPerView}
  autopaly={{ delay: 3000, disabledOnInteraction: true }}
  touchReleaseOnEdges
>
	<SwiperSlide />
</Swiper>

• modules={[Navigation, Pagination, Autoplay, EffectFade]}
  : 부수적으로 사용할 큰 기능은 modules에 추가해줘야 사용 가능

• onSlideChange={(el) => console.log(el.activeIndex}
  : 좌우로 스와이프할 때 즉, 슬라이드가 변경될 때마다 실행되는 함수로 el.activeIndex에 접근하면 현재 몇번째 슬라이드 화면인지 알아낼 수 있다
  💬 나는 이 기능을 통해 로티 파일 실행 끝났을 때 idx가 변경되도록 구현했음

• pagination={{ clickable: true }}
  : 스와이프 보면 슬라이드 개수만큼 아래 점들이 존재하는 경우가 있는데 여기서 각 슬라이드에 해당하는 점을 눌렀을 떄 해당 슬라이드로 이동할지 여부를 정할 수 있음
  

• loop: true일 경우 마지막 슬라이드에서 한번 더 스와이프하면 첫번째 슬라이드 화면으로 돌아간다
  기본값은 false여서 속성을 지정 안해도 되지만 loop를 true로 사용하려면 별도 값없이 loop 만 추가해주면 된다

• ref: Swiper에도 ref 기능이 있어서 똑같이 사용하면 됨
  ⚠️ But, 타입 지정시 const swiperRef = useRef<SwiperRef>(null); 요렇게 SwieprRef 를 따로 import해줘야 한다
  

• touchReleaseOnEdges
  : 첫번째, 마지막 슬라이드에서 그 이전 또는 이상의 페이지 스와이프를 막는 기능
  💬 나 같은 경우는 해당 속성을 추가하지 않았을 떈 마지막 슬라이드 화면에서 스와이프가 가능해서 스와이프하면 상위 컴포넌트의 다른 배경색이 보여지는 현상이 있어서 해당 속성을 추가했다
  

• autopaly={{ delay: 3000, disabledOnInteraction: true }}
  : default값이 delay: 3000, disabledOnInteraction: true라 별도로 따로 또 지정 안해줘야 위처럼 동작하긴 할듯!
  - delay 부분에는 자동재생할 시간을 넣어주면 된다. (e.g. 3000 → 3초)
  - disabledOnInteraction이 true이면 사용자의 스와이프 동작이 감지되면 자동 재생이 일시적으로 중지된다. 사용자 인터렉션이 감지되지 않으면 다시 자동 재생된다

• effect=”fade”
  : effect은 스와이프할 때의 효과를 지정하는건데 fade, cube, coverflow, flip, cards, creative 가 있다.
  - ⚠️ 만약 fade 효과를 사용할 때 슬라이드끼리 겹쳐지는게 싫으면 fadeEffect={{ crossFade: false }} 해당 속성을 추가하면 된다
  🔗 하단 Swiper Demo를 통해 효과를 확인해보고 설정하면 좋을듯!
  ㄴ https://swiperjs.com/demos#effect-fade

• slidesPerView={2}
  : 한 화면에 슬라이드를 몇개 표시할 지 설정할 수 있다
  💬 나 같은 경우에는 가운데 온전한 콘텐츠 하나를 표시하고 좌우로는 잘려서 조금만 보이는 콘텐츠( ] [] [ )를 표시하는 형태로 구현했어야 했는데 이러한 경우 centeredSlides 속성을 추가하면 활성화된 슬라이드 화면이 가운데에 위치하게 된다

🤹 Swiper 동작

나 같은 경우에는 로티 파일 실행이 종료되었을 때 activeIdx를 변경시켜주고, 이에 따라 자동으로 스와이프 되어야 했어서 useEffect문에 swiperRef.current.swiper.slideTo()를 추가하여 자동 스와이프되도록 구현했다

useEffect(() => {
  if (swiperRef.current) {
    swiperRef.current.swiper.slideTo(activeIdx);
  }
}, [activeIdx]);