Library React Swiper 슬라이드 가능한 컴포넌트 만들기

react swiper

React Library 중 하나인 React Swiper를 사용해보고자 한다.

업무 중에 생각보다 많이 쓰이기에 한번 정리하고 넘어가야 할것 같다.

오늘은 기본적인 사용법과 문법에 대해 알아보자.

 

1. Package Install

npm install swiper

or

yarn add swiper

 

2. 기본 문법

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import { IListItem } from 'src/common/view-model/list.view-model';

interface IProps{
	list : IListItem[];
}

/**
 * 스와이퍼 슬라이드 이미지
 * @param props.list image, name으로 구성된 array props
 */
export default function SlideItem (props:IProps) => {
	const { list } = props;

    return (
        <Swiper
            spaceBetween={16}
            slidesPerView={3}
        >
            { list.map((item: IListItem, key: number) => {
            	return ( 
            	<SwiperSlide key={`slide_list_${key}`}>
            		<img src={item.image} alt='slide_image' />
                    <p>{item.name}</p>
            	</SwiperSlide>
            	)
            }}
        </Swiper>	
    );
};

아주 기본적인 React, Next.js + TypeScript 에서 사용되는 Functional-Component 문법과 더불어 React Swiper 사용법이다.

 

3. 자유로운 응용, 모듈확인하기

응용을 하려면 문서를 꼭 봐야하고, 제공하는 기능들이 어떤것이 있는지 알아두어야 하는데

다음은 React swiper 문서에서 제공하는 모듈이다.

 

Virtual - 가상 슬라이드 모듈
Keyboard - 키보드 제어 모듈
Mousewheel - 마우스 휠 제어 모듈
Navigation - 탐색 모듈
Pagination - 페이지 매김 모듈
Scrollbar - 스크롤바 모듈
Parallax - 시차 모듈
FreeMode - 자유 모드 모듈
Grid - 그리드 모듈
Manipulation - 슬라이드 조작 모듈(코어 버전에만 해당)
Zoom - 줌 모듈
Controller - 컨트롤러 모듈
A11y - 접근성 모듈
History - 히스토리 탐색 모듈
HashNavigation - 해시 탐색 모듈
Autoplay - 자동 재생 모듈
EffectFade - 페이드 효과 모듈
EffectCube - 큐브 효과 모듈
EffectFlip - 플립 효과 모듈
EffectCoverflow - 커버플로우 효과 모듈
EffectCards - 카드 효과 모듈
EffectCreative - 크리에이티브 효과 모듈
Thumbs - 엄지손가락 모듈

모두 많이 사용하지만 개인적으로 자주 사용하는 모듈을 볼드체로 표시해놓았다.

 

다음 심화글에서는 더 깊게 응용하는 법을 알아보자.