[React] React-slick 라이브러리 사용하기

React-slick 란?

react에서 carousel를 구현하는 라이브러리로 우리가 자주 보는 슬라이드를 구현할 수 있다.

공식 홈페이지에 보다 많은 정보를 볼 수 있다.

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

Neostack

 

 

 

 

 

 

설치하기

라이브러리 역시 터미널에서 npm 혹은 yarn을 통해 설치해줘야 한다.

만약 기본 라이브러리에서 css를 수정하고 싶으면 style 역시 설치해야 한다.

 

// npm
$ npm install --save react-slick

// yarn
$ yarn add react-slick

// style
$ npm install slick-carousel

 

 

 

 

 

기본 코드

공식 홈페이지에는 class 컴포넌트로 구현되어 있어 함수형 컴포넌트로 사용하려면 변경이 필요하다.

import React, { Component } from "react";
import Slider from "react-slick";

export default class SimpleSlider extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <div>
        <h2> Single Item</h2>
        <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
      </div>
    );
  }
}

 

나는 이 기본 코드 대신에 화살표 함수를 사용해서 함수형 컴포넌트로 구현했다.

import React from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import styled from 'styled-components';

const MainSlide = () => {
  return (
    <div>
      <Slider {...settings}>
        <CarouselBox>
          <CarouselImg src="http://www.cha.go.kr/unisearch/images/national_treasure/2685609.jpg" />
        </CarouselBox>
        <CarouselBox>
          <CarouselImg src="http://www.cha.go.kr/unisearch/images/national_treasure/1611449.jpg" />
        </CarouselBox>
        <CarouselBox>
          <CarouselImg src="http://www.cha.go.kr/unisearch/images/national_treasure/1611458.jpg" />
        </CarouselBox>
        <CarouselBox>
          <CarouselImg src="http://www.cha.go.kr/unisearch/images/national_treasure/1612029.jpg" />
        </CarouselBox>
      </Slider>
    </div>
  );
};

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  autoplay: true,
  autoplaySpeed: 2500,
  slideToShow: 1,
  slidesToScroll: 1,
  centerPadding: '0px',
  centerMode: true,
};

const CarouselBox = styled.div`
`;

const CarouselImg = styled.img`
  width: 100%;
  height: auto;
  object-fit: cover;
`;

export default MainSlide;

만약 styled-components와 함께 사용할 때는 css 역시 import 해줘야 한다.

 

 

 

 

 

 

custom 하기

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  autoplay: true,
  autoplaySpeed: 2500,
  slideToShow: 1,
  slidesToScroll: 1,
  centerPadding: '0px',
  centerMode: true,
};

settings 함수를 통해 이 라이브러리를 쉽게 custom할 수 있다.

 

• dots
  • 슬라이드 하단에 있는 동그란 버튼을 의미한다.
  • true 일 경우 버튼이 생성되고 false 일 경우 사라진다.
• arrow
  • 양 옆에 있는 next, prev button
  • dots 처럼 true, false를 통해 조절할 수 있다.
  • button custom이 가능한데 nextArrow, prevArrow에 커스텀한 화살표 컴포넌트를 넣어주면 된다.
• infinite
  • 해당 슬라이드를 무한으로 반복할 수 있도록 만들어준다.
  • true로 지정하면 맨 마지막 슬라이드 다음에 자동으로 첫 번째 슬라이드가 온다.
• speed
  • 슬라이드가 넘어갈 때 속도를 의미한다
  • 500인 경우 0.5초를 의미
• slidesToShow
  • 한 번에 볼 수 있는 슬라이드 개수를 의미한다
  • 1로 지정시 1개의 슬라이드만 볼 수 있다
• slidesToScroll
  • 한 번에 넘어가는 슬라이드 수를 의미한다
  • 1로 지정하면 1개씩 넘어간다
• autoplay
  • 자동으로 슬라이드가 넘어가도록 만들어준다.

 

이외에도 다양한 옵션이 있으며 custom 하고 싶은 부분을 마음대로 custom해서 사용하면 된다.

 

 

 

 

 

 

 

 

 

---

예전 프로젝트에서 사용했을 때는 내가 맡은 부분이 아니라서 알고만 넘어갔었는데, 이번에 사용하게 되면서 정리해본다.

생각보다 다양하게 custom할 수도 있고 직접 carousel 구현하는 것보다는 더 쉽게 라이브러리를 사용하여 적용할 수 있다는 걸 알게 되었다.