React slice 만들기 With react- slick

오늘은 리액트에서 슬라이드를 생성하는 라이브러리에 대해서 글을 작성하려고 한다.

1. React -slick이란?

리액트에서 슬라이드를 간단하게 구현할 수 있는 오픈형 라이브러리이다.

2. React Slick 설치 및 사용

npm install react-slick --save, yarn add react-slick 둘 중 하나의 명령어를 사용하여 설치를 진행한다.

npm install slick-carousel --save 추가로 설치한다.

아래 두 줄을 import한다.
import "~slick-carousel/slick/slick.css";
import "~slick-carousel/slick/slick-theme.css";

아래 코드는 실제 사용한 코드의 일부분인다.

import Slider from "react-slick";


function Slide({ children, slidesToShow, slidesToScroll }) {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: slidesToShow,
    slidesToScroll: slidesToScroll,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />
  };
  
  return (
    <div className="slide">
      <div className="container">
        <Slider {...settings}>{children}</Slider>
      </div>
    </div>
  );
}

처음 보면 약간 복잡해 보일 수 있겠지만 Slider를 Import 하고 내부에 자식 컴포넌트들을 넣어주면 끝이다. Props로 전달받고 있는 children, slidesToShow, slidesToScroll3가지 값들은 선택사항은 아니고 Slide 컴포넌트의 보이는 개수와 한 번에 넘겨지는 개수들을 유동적으로 사용하기 위해 값을 전달받았다.
아래 코드를 보면 이해가 더 쉬울 것이다.

 <Slide slidesToShow={5} slidesToScroll={5}>
      {cards.map((card) => (
        <CatCard key={card.id} item={card} />
      ))}
 </Slide>
 
 <Slide slidesToShow={4} slidesToScroll={4}>
     {projects.map((card) => (
       <ProjectCard key={card.id} item={card} />
     ))}
 </Slide>

모든 슬라이드들이 보이는 슬라이드 개수와 넘어가는 슬라이드 개수가 같지 않기 때문에 컴포넌트에 props로 값을 전달하여 사용하는 것이 효율적이다.

3. React - Slick 커스텀

slick의 슬라이드는 settings의 값을 변경함으로써 가능하다.

const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: slidesToShow,
slidesToScroll: slidesToScroll,
nextArrow: ,
prevArrow: ,
};

1. dots: 슬라이드 아래에 나타나는 점들을 나타낼지 결정한다.
2. infinite: 슬라이드를 무한으로 반복할 수 있도록 한다.
3. speed: 슬라이드가 넘어가는 속도를 나타낸다. 500의 경우 0.5초를 나타낸다.
4. slidesToShow: 한 번에 보이는 슬라이드 개수를 의미한다.
5. slidesToScroll: 한 번에 넘어가는 슬라이드 개수를 의미한다.

이전 화살표(prevArrow)와 다음 화살표(nextArrow)를 보면 각각 컴포넌트를 값으로 가지고 있는데 커스텀 하는 방식이다. 아래는 예제 코드이다.
style부분을 원하는 방식으로 변경해서 사용하면 된다.

function SampleNextArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block", background: "red" }}
      onClick={onClick}
    />
  );
}

function SamplePrevArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block", background: "green" }}
      onClick={onClick}
    />
  );
}

React-slick 공식사이트 !!