리액트 - Slick?

Slick

리액트에는 여러 라이브러리가 있다 그 중에 슬라이드를 사용하기 쉽게 만들어 놓은 라이브러리가
있는데 그것이 바로 'slick' 이다

또한 slick slider는 반응형 웹을 지원하는 슬라이딩 기능이 있는 라이브러리이다

일단 라이브러리이기 때문에 설치를 해야한다

npm install react-slick --save
npm install slick-carousel --save

뒤에 --save를 붙여 package.json 파일에도 추가하는 것을 잊지말자
(참고 : carousel은 회전목마라는 뜻이다 즉! 슬라이드라는 용어가 아닌 정식용어로는 carousel인 것이다)

npm으로 설치가 됬다면

import "~slick-carousel/slick/slick.css";
import "~slick-carousel/slick/slick-theme.css";

import Slider from "react-slick";

위의 두가지를 import하여 슬라이드 기능을 구현하고 싶은곳에 배치를 한다
(앞에 ~는 node-modules에 설치 되어있는 라이브러리중 해당 파일을 알아서 찾아간다)

자 이제 사용하면되는데 너무 간단하다

나의 경우는 아래와 같이 사용하였다.

  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 1000,
      autoplay: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      lazyLoad: true,
    };
    const { data } = this.state;
    return (
      <div class="sliderContainer">
        <Slider {...settings}>
          {data.map((data, index) => {
            return (
              <div className="sliderImg" key={index}>
                <img src={data.img} alt={data.id} />
              </div>
            );
          })}
        </Slider>
      </div>
    );

render아래에 settings 라고 하는 객체를 생성하여 Slider 컴포넌트에 적용될 수 있는 값들을 설정해준다.

객체의 값으로는 speed는 1000단위가 1초를 의미하며 autoplay로 자동으로 슬라이드를 실행 시킬 수 있고 infinite 옵션 또한 슬라이드가 끝을 가면 계속 실행이 된다.

https://react-slick.neostack.com/

위 사이트를 이용하면 더욱 다양한 예시를 볼 수가 있다.