React에서 Swiper.js를 사용하는 방법

리액트(React)에서 Swiper.js를 사용하는 방법은 일반 HTML에서 사용할 때보다 훨씬 직관적이고 편합니다. Swiper가 리액트 전용 컴포넌트(<Swiper>, <SwiperSlide>)를 공식적으로 제공하기 때문인데요.

2026년 현재 최신 버전 기준으로 가장 널리 쓰이는 방식을 알기 쉽게 정리해 드릴게요!

---

 

https://swiperjs.com/get-started

---

---

1단계: 패키지 설치하기

먼저 터미널을 열고 터치 슬라이더를 적용할 리액트 프로젝트 폴더에서 아래 명령어를 입력해 패키지를 설치합니다.

Bash

 

npm install swiper
# 또는 yarn을 쓰신다면
yarn add swiper

---

2단계: 리액트 컴포넌트 구현하기

리액트에서는 필요한 기능(모듈)과 CSS 스타일을 각각 직접 import 해와야 합니다.

가장 기본적이면서도 자주 쓰이는 자동 재생(Autoplay), 페이지 번호(Pagination), 좌우 화살표(Navigation) 기능이 포함된 예시 코드입니다.

JavaScript

 

import React from 'react';
// 1. 필요한 Swiper 컴포넌트 가져오기
import { Swiper, SwiperSlide } from 'swiper/react';

// 2. Swiper 필수 및 추가 스타일 가져오기
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

// 3. 사용할 기능(모듈) 가져오기
import { Pagination, Navigation, Autoplay } from 'swiper/modules';

// 4. 슬라이더 내부에 들어갈 스타일을 위한 CSS 파일 (필요 시)
import './MySlider.css'; 

function MySlider() {
  return (
    <div className="slider-container">
      <Swiper
        // 사용할 모듈들을 배열로 등록합니다.
        modules={[Pagination, Navigation, Autoplay]}
        spaceBetween={50}          // 슬라이드 사이의 간격 (px)
        slidesPerView={1}           // 한 번에 보여줄 슬라이드 개수
        loop={true}                 // 무한 반복
        autoplay={{ delay: 3000, disableOnInteraction: false }} // 3초마다 자동 재생
        pagination={{ clickable: true }} // 페이지네이션(점) 노출 및 클릭 가능
        navigation={true}           // 좌우 화살표 노출
        className="mySwiper"
      >
        {/* 슬라이드 아이템들 */}
        <SwiperSlide><h3>슬라이드 1</h3></SwiperSlide>
        <SwiperSlide><h3>슬라이드 2</h3></SwiperSlide>
        <SwiperSlide><h3>슬라이드 3</h3></SwiperSlide>
        <SwiperSlide><h3>슬라이드 4</h3></SwiperSlide>
      </Swiper>
    </div>
  );
}

export default MySlider;

---

3단계: CSS 스타일링 입히기 (MySlider.css)

슬라이더가 정상적인 크기로 예쁘게 나오도록 최소한의 스타일을 지정해 줍니다.

CSS

 

.slider-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.swiper {
  width: 100%;
  height: 400px;
  border-radius: 12px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3498db;
  color: white;
  font-size: 24px;
}

---

💡 리액트에서 쓸 때 기억하면 좋은 핵심 포인트!

1. swiper/modules 경로 주의: 이전 버전(v6~v8)에서는 모듈을 가져오는 경로가 swiper였으나, 최신 버전 버전에서는 swiper/modules로 명확히 분리되었습니다.
2. 반응형 웹 설정 (breakpoints): 화면 크기에 따라 보여주는 슬라이드 개수를 다르게 하고 싶다면 <Swiper> 태그에 아래와 같이 breakpoints 옵션을 주면 됩니다.
3. JavaScript

    

   breakpoints={{
     640: { slidesPerView: 1 },  // 모바일
     768: { slidesPerView: 2 },  // 태블릿
     1024: { slidesPerView: 3 }, // PC
   }}
   

리액트 컴포넌트 구조로 제공되다 보니 map() 함수를 사용해 서버에서 받아온 이미지 배열 데이터를 슬라이더로 녹여내기도 아주 편리합니다.

---