[React] swiper 사용하기

평소에도 잘 이용하던 swiper을 react 프로젝트에서도 사용하기 위하여 정리하였다..!

우선 swiper 홈페이지에 들어가서 react 아이콘을 클릭하면 나오는 문서를 참고하자.

1. npm i swiper을 통하여 스와이퍼를 install해준다.

2. 네비게이션, 페이지네이션, 스크롤바를 사용하는 경우는 import가 필요!

import { Navigation, Pagination, Scrollbar } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

3. swiper을 사용할 때에는 아래 코드처럼 작성한다.

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

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import './App.css'

const App = () => {
return (
  <div className="App">
  <Swiper
    modules={[Navigation, Pagination]}
    spaceBetween={50}
    slidesPerView={3}
    navigation
    pagination={{ clickable: true }}
    scrollbar={{ draggable: true }}
  >
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
    <SwiperSlide>Slide 4</SwiperSlide>
    <SwiperSlide>Slide 5</SwiperSlide>
  </Swiper>
  </div>
);
};
export default App;

4. 하지만 나는 코드 가독성을 높여주기 위하여 params로 불러오기로 하였다.

이렇게 작성했다면,

이런 식으로 적어줄 수 있다.
breakpoints를 이용하여 반응형 작업도 가능하다.