react-slick 이란?

react-slick 라이브러리는 React Carousel을 사용하기 쉽게 라이브러리화 시킨것을 의미합니다.
실제로 react만을 이용해 carousel을 만들경우, 하단에 무한 carousel 이나 하단에 dot 등 고려해야 할 것이 많기 때문에 사용법만 안다면 훨씬 간단하게 carousel을 구현할 수 있습니다.

어떻게 사용할까?

npm install react-slick --save

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

일단 react-slick을 install 한 이후, 해당 라이브러리에서 제공하는 css를 사용하고자 하는 파일에서 import 하면 됩니다.

export default function SimpleSlider() {
  var settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  return (
    <Slider {...settings}>
      <div>
        <h3>1</h3>
      </div>
      <div>
        <h3>2</h3>
      </div>
      <div>
        <h3>3</h3>
      </div>
    </Slider>
  );
}

홈페이지에서 제공하는 예제인데요, import 해온 Slider 라이브러리에 객체로 선언해둔 settings 정보를 넣어주기만 하면 됩니다. 그러고 난 이후에 슬라이드에 반복시키고 싶은 내용을 적어주면 react-slick 슬라이더가 알아서 carousel을 만들어줍니다.
settings 부분에는 정말 다양한 옵션들을 넣어줄 수 있기 때문에 여기에서 하나하나 살펴보시는 것을 추천드립니다.

styled-components로 커스터마이징하기

먼저 코드와 함께 살펴보도록 하겠습니다.

import React from 'react';
import styled from 'styled-components/macro';
import Slider from 'react-slick';

const ProductImgSlider = ({ productInfo }) => {
  const imgs = productInfo.image_url;
  let settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };

  return (
    <ProductImgWrap>
      <StyledSlider {...settings}>
        {productInfo && imgs?.map((img, i) => <ProductImg src={img} key={i} />)}
      </StyledSlider>
    </ProductImgWrap>
  );
};

export default ProductImgSlider;

const ProductImgWrap = styled.div`
  width: 300px;
  height: 200px;
  border-radius: 10px;
`;

const StyledSlider = styled(Slider)`
  .slick-prev {
    left: 10px !important;
    z-index: 1000;
  }

  .slick-next {
    right: 10px !important;
    z-index: 1000;
  }

  .slick-dots {
    display: flex;
    width: 100px;
    margin: 0;
    padding: 0;
    left: 50%;
    bottom: 10px;
    transform: translate(-50%, -50%);
  }

  .slick-dots li {
    width: 6px;
    height: 6px;
    margin: 0 3.5px;
  }

  .slick-dots li button {
    width: 6px;
    height: 6px;
  }

  .slick-dots li button:before {
    width: 6px;
    height: 6px;
    color: white;
  }

  .slick-dots li.slick-active button:before {
    color: white !important;
  }

  li {
    margin: 0;
    padding: 0;
  }
`;

const ProductImg = styled.img`
  width: 100%;
  height: 200px;
  border-radius: 10px;
  object-fit: cover;
`;

settings 부분은 본인의 취향이기 때문에 넘어가고, 바로 커스터마이징 하는 부분으로 넘어가겠습니다.

const StyledSlider = styled(Slider)`

`;

라이브러리 자체를 styled-components로 감싸서 스타일링을 해주면 되는데요, 위에 코드를 보시면 작성한 적이 없는 클래스 이름을 스타일링 하는 것을 볼 수 있습니다. 이 클래스들에 접근할 수 있는 이유는 클래스들이 바로 react-slick이 제공해주는 클래스들이기 때문입니다.
그렇다면 이 클래스 이름들을 어떻게 알 수 있을까요?
바로 개발자 도구를 통해서 알 수 있습니다.

위와 같이 개발자 도구를 열게 되면 직접 작성하지는 않았지만 react-slick 에서 제공해주는 태그들과 그에 맞는 클래스 명들을 nesting 을 통해 접근할 수 있습니다.