[Slick-slider] react slickt 세팅/간격주기/드래그 중 클릭막기 [1]

React에서 많이 사용하는 Carousel은 여러가지가 있겠지만, 그 중 직관적이고 많이사용하는 slick slider을 이용해 Carousel을 뽀개..보겠습니다!

사용한 스택 : React / TypeScript / emotion

emotion은 styled-component와 비슷하니 문법만 잘 수정하면됩니다
styled-component를 사용할경우 하나 확인해야할 부분은 반응형 적용부분입니다!

---

목차

1. 슬라이드 세팅
2. 간격주기
3. 드래그중 클릭 막기

---

슬라이드 세팅

1. 패키지 로드

리엑트에서 slick을 세팅하기위에선 몇가지 패키지를 다운로드 해야합니다.

//react slick
npm install react-slick --save 
npm install slick-carousel --save
//타입스크립트 사용시
npm install --save @types/react-slick​

slick을 세팅해줄 패키지  + 타입 정의

2. 컴포넌트 생성

저는 공통으로 Carousell을 사용하기 위해 하나의 컴포넌트로 빼주었습니다.

import React, { PropsWithChildren } from 'react';

import Slider, { Settings } from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

interface CarouselProps extends PropsWithChildren<{}> {
  settings?: Settings;
}

const Carousel = (props: CarouselProps) => {
 const settings = {
    dots: true,
    initialSlide: 0,
    slidesToShow: 1,
    slidesToScroll: 1,
    infinite: false,
    ...props.settings
  };
  
  return (
    <Slider
      {...settings}
    >
      {props.children}
    </StyledSlider>
  );
};

export default Carousel;

* 기본으로 사용할 settings를 세팅해주고, props로 추가로 더 settings를 더 받을 수 있도록 하였습니다.
  Carousel마다 스타일이 다를테니까요!

import React from 'react';
import Carousel from 'component';

const Box = (props: CarouselProps) => {
 const settings = {
   infinite: true
  };
  
  return (
    <Carousel settings={settings}>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </Carousel>
  );
};

export default Box;

 

3. API

세팅에 대해 조금 더 이야기를 해보자면, 자주 사용하는 세팅에대해 말해볼 수 있을거 같습니다. 
(세팅들에대한 설명이 필요 없다면 건너뛰어도 무방합니다. API는 링크를 통해 확인하실 수 있습니다!)

settings

1. dots 
>> type : boolean
>> 페이지네이션사용 여부를 결정합니다.
>> 기본 스타일이 있는데 커스텀도 가능합니다. 

2. customPaging
>> type: func
>> 페이지네이션을 커스텀합니다. 커스텀 방법은 링크를 참고해주세요!

3. afterChange
>> type : func
>> index를 반환해주므로 주목할 필요가 있는 세팅입니다.
     slick slider에서는 현재 index를 반환해주는 모양이지만 react slide에서는 해당기능을 찾지 못했거든요,,

4. beforeChange
>> type : func
>> 이전 index와 다음 index를 반환해줍니다. 
     afterChange, beforeChange둘다 사용해서 언제 뭐가 실행되는지 체크해보고 사용하면 좋을것같습니다.

5. centerMode
>> type : boolean
>> 중앙에서 시작하게 해주는 옵션입니다.

6. centerPadding
>> type : string
>> centerMode했을같이 세팅해줘야 좋습니다.

7. infinite 
>> type : boolean
>> 말그대로 무한 모드입니다. 마지막 슬라이드에 도달하면 다음에 첫번쨰 슬라이드가 보이게 됩니다.

Methods

1. slickGoTo
>> args : index, dontAnimation
>> slider.slickGoTo(index, dontAnimation)
>> dontAnimation의 기본값은 true인데, true로 두면 pagination클릭시 모션 없이 이동하게 됩니다.