React - Swiper 사용하기, 카드 및 화면 슬라이드 시 사용

서비스 개발을 하다보면 다양한 화면 또는 이미지를 보여주기 위해 슬라이드 기능이 필요한 경우가 종종 있습니다.
부드럽게 화면이 넘어가는 기능을 구현하는 방법에는 다양하게 있지만 Swiper 라이브러리를 사용할 수 있습니다.
Swiper 라이브러리를 사용하여 구현하는 방법에 대해 작성해보도록 하겠습니다. 

Swiper 설치 및 import 

---

https://swiperjs.com/react

Swiper - The Most Modern Mobile Touch Slider

위 링크를 통해서 Swiper 라이브러리를 사용하여 화면 슬라이드 기능을 구현할 수 있습니다.
먼저 Swiper 를 사용하기 위해서 라이브러리를 설치해야 합니다.

npm i swiper

 
라이브러리 설치 후 사용할 파일 상단에 import 해준 후 사용할 수 있습니다. 

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

import 'swiper/css';

react 기반의 파일을 사용하는 경우 위의 코드와 같이 라이브러리를 import 한 후 사용할 수 있습니다. 
 

Swiper  사용

---

https://swiperjs.com/demos

Swiper Demos

위의 링크로 들어가서 다양한 화면 슬라이드 방식을 확인한 후 원하는 방식의 슬라이드 방식을 선택합니다. 
슬라이드 화면에 페이지 번호를 넣을 수도 있고, 화면 양 끝에 화살표를 넣어 화면을 이동할 수도 있습니다. 

이 중 원하는 슬라이드를 선택한 후 위의 react 라는 버튼을 눌러 react 코드 스니펫을 확인할 수 있습니다.

react 버튼을 누르면 위와 같이 코드와 함께 demo 화면을 볼 수 있습니다. 
실제 본인 프로젝트에서 사용하기 위해서는 왼쪽의 코드 스니펫을 복붙을 하여 사용해도 된답니다. 
하지만 위의 demo 와 달리 본인이 변경하여 사용하기 위해서는 코드를 분석하여 어떻게 사용되는지 알 필요가 있습니다. 

import React, { useRef, useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';

// 해당 demo 에서 사용되는 swiper 디자인 import
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

import './styles.css';

// 슬라이드 사용하는데 색상, 배치 외의 페이지 넘버, 화면 이동 모듈 import
import { Pagination, Navigation } from 'swiper/modules';

먼저 코드 상단의 import 하는 부분에 대해 설명해보도록 하겠습니다. 
1. react 라이브러리에서 사용할 수 있는 react hook 을 import 합니다. 
2. 위에서 설명했던 Swiper 라이브러리를 import 합니다. 
3. 다음으로 원하는 demo의 디자인, 예를 들어 이미지 가운데 배치, 색상, 크기 등등을 설정하기 위해 css 파일을 import 합니다. 
4. 마지막으로 슬라이드 기능 구현을 위한 모듈을 import 하는 것인데 해당 demo 는 슬라이드 화면에 몇 번째 화면인지 알 수 있도록 페이지에 넘버를 넣는 기능을 추가할 수 있는 모듈을 추가합니다. 

export default function App() {
  return (
    <>
      <Swiper
        pagination={{
          type: 'fraction',
        }}
        navigation={true}
        modules={[Pagination, Navigation]}
        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>
    </>
  );
}

다음으로 export 하는 함수 내에서 사용하는 방식에 대해 설명해보도록 하겠습니다. 

1. 먼저 import 한 후 속성을 지정해줍니다. 
- import 한 모듈들을 사용해줍니다. 이때에 사용할 모듈들은 중괄호{} 에 넣어 작성해줍니다. 
- 다음으로 화면 양 끝의 화살표를 이용하여 화면을 이동하기 위해서 navigation 속성을 true 로 설정해줍니다. 
- 스타일 속성을 적용하기 위해서 style.css 파일을 가져와서 적용시킬 수 있습니다. 

2. 다음으로 slider 에 넣는 내용을 보여주기 위해 swiperslide 태그를 사용합니다. 
슬라이드에 본인이 원하는 이미지 또는 div 태그와 같은 것을 넣어 나타낼 수 있습니다.
 

---

이렇게 화면 내의 이미지와 같은 것을 부드럽게 넘기며 보여주기 위해 slide 기능을 구현할 수 있습니다!!
이미지 선택 옵션을 보여주는 화면을 구상할 때 유용하게 사용할 수 있을 것 같습니다!!

화면 이동을 감지하고 현재 페이지를 알 수 있으니 효율적으로 사용하면 쏠쏠할것 같습니다~!

#react #slider #swiper #useState #프론트엔드 #개발자 #reactJS