[React Swiper.js] 설치 및 사용법 알아보기

📌 Swiper.js

- 캐러셀 UI를 만들기 위해 사용되는 인기 있는 라이브러리

- 이미지 슬라이드 또는 콘텐츠 이동을 구현할 때 사용

- 웹과 앱에서 터치 및 반응형 최적화

- 간단한 사용법, 다양한 옵션 제공, 다양한 환경에서 커스터마이징 가능

 

🔗 Swiper 공식 문서

 

📍 기존 React 프로젝트에 Swiper 설치

npm install swiper

 

// 📍 SwiperTest.tsx
// Import Swiper React components
import { Swiper, SwiperClass, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';

export const SwiperTest = () => {
  return(
    <Swiper
      spaceBetween={10}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper:SwiperClass) => console.log('onSwiper', swiper)}
    >
      <SwiperSlide><div className="box">1</div></SwiperSlide>
      <SwiperSlide><div className="box">2</div></SwiperSlide>
      <SwiperSlide><div className="box">3</div></SwiperSlide>
      <SwiperSlide><div className="box">4</div></SwiperSlide>
      <SwiperSlide><div className="box">5</div></SwiperSlide>
    </Swiper>
  )
}

// 📍SwiperTest 컴포넌트 사용
<div>
  <SwiperTest />
</div>

✅ Swiper 사용 끝!

- 3개씩 보여주기

- 슬라이드 간격 10

 

 

 

📍 Swiper TypeScript - SwiperClass,  SwiperProps

📗SwiperClass

- SwiperClass는 Swiper.js에서 제공하는 React 환경에서의 Swiper 인스턴스 타입

- React Swiper에서 반환되는 인스턴스 타입

// React Swiper에서 제공하는 타입을 import하는 방식
import { SwiperClass } from 'swiper/react'
// 👆 or 👇
// Swiper의 core class를 직접 import하는 방식
import { Swiper as SwiperClass } from 'swiper'

const handleOnSwiper = (swiper: SwiperClass) => {
  console.log(swiper)
}

<Swiper onSwiper={handleOnSwiper}> ... </Swiper>

 

📗SwiperProps

- Swiper 컴포넌트에 전달되는 속성들을 정의한 타입

import { SwiperProps } from 'swiper/react';

const CAROUSEL_DEFAULT_OPTIONS: SwiperProps = {
  spaceBetween: 10,
  slidesPerView: 3,
};

<Swiper {...CAROUSEL_DEFAULT_OPTIONS}>
...
</Swiper>

 

📍 Swiper 컴포넌트 - props : option, children 활용

- 부모 컴포넌트에서 list.map slide-item을 만들어서 children으로 보내고 싶을 때

- children 받아와서 map을 사용하여 각각 SwiperSlide로 슬라이드 생성

 - 부모에게 전달 받은 옵션을 swiper 에 적용과 디폴트 옵션 설정

// 📍SwiperTest.tsx
import React from 'react';
import { Swiper, SwiperSlide, SwiperProps } from 'swiper/react';
import 'swiper/css';

interface SwiperTestPropsType {
  children: React.ReactNode;
  swiperClassName?: string;
  swiperOptions?: SwiperProps;
}
const CAROUSEL_DEFAULT_OPTIONS: SwiperProps = {
  spaceBetween: 10,
  slidesPerView: 3,
};

export const SwiperTest = ({
  children, 
  swiperClassName = 'carousel-wrap',
  swiperOptions = CAROUSEL_DEFAULT_OPTIONS, 
}:SwiperTestPropsType) => {
  return(
    <Swiper
      {...swiperOptions}
      className={swiperClassName}
    >
      {
        React.Children.toArray(children).map((childEl, index) => (
          <SwiperSlide key={index} className="carousel-item">
            {childEl}
          </SwiperSlide>
        ))
      }
    </Swiper>
  );
};


// 📍 Parent.tsx
const testData = ['slide-1','slide-2','slide-3','slide-4','slide-5','slide-6'];

<SwiperTest>
  {
    testData.map((item,idx) => (
      <div className="box" key={idx}>
        {item}
      </div>
    ))
  }
</SwiperTest>

 

 

 

 

✍️ 기록

 

감사합니다. 😁