Slick 라이브러리 사용법 feat. React + Styled Components

Slick 라이브러리를 사용하여 간편하게 Carousel을 만들어 보도록 하자

우선 설치를 해야한다.
터미널을 열고 아래 코드를 입력하여 설치하도록 한다.

npm install react-slick --save
Carousel을 꾸며줄 Css사용을 위해 아래도 설치 해주도록 하자
npm install slick-carousel --save

자 이제 캐러셀을 만들 준비가 완료 되었다.
Carousel 을 만들 컴포넌트 최상단에 Css를 Import 해주자.
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

기본적인 Carousel의 코드 모습은 아래와 같다.

import React from 'react';
import Slider from "react-slick";

//캐러셀이 어떻게 표현될지 옵션
export default setting () {
  const settings = {
    dots: true, //셀의 수만큼 아래에 점이 표시된다
    infinite: true, // 무한 캐러셀이 만들어진다
    speed: 500, // 캐러셀이 넘어가는 속도
    slidesToShow: 1, // 몇개의 셀이 한번에 보일지
    slidesToScroll: 1 //몇개의 셀이 넘어갈지
  };
  
  return (
    <section>
      <Slider {...setting}>
        캐러셀 UI 1
    	캐러셀 UI 2
        캐러셀 UI 3
      </Slider>
    </section>
    )
}

더욱 다양한 옵션을 이용해 보고싶다면 여기 를 클릭하여 Slick 홈페이지 에서 학습해보도록 하자.

자 이정도 까지 왔다면 어느정도의 Carousel이 만들어졌을 것이다. 하지만 중요한것은 Customizing 이다.
node_modules에 가보면 slick-carousel이 있을것이다. 그리고 그곳에 있는 slick 에 들어가 보면 slick-theme.css가 보인다. 바로 그것이 라이브러리의 css부분이다. 한번 둘러봐도 좋지만 바쁘다면 간단히 사용법을 알아 보도록 하자.

export const Wrap = styled.div`
  margin: 5% auto;
  width: 100%;
  .slick-prev {
    left: calc((100% - 1440px) / 2);
    z-index: 9999;
  }
  .slick-next {
    right: calc((100% - 1400px) / 2);
  }
  .slick-prev:before,
  .slick-next:before {
    ${variables.flex()}
    position: absolute;
    top: -95px;
    width: 40px;
    height: 90px;
    opacity: 0.75;
    border-radius: 30px;
    background-color: #fff;
    color: #6666;
  }
`;

개인적으로 양쪽 화살표만 수정이 필요했어서 .slick-prev(왼쪽 버튼) 과 .slick-next(오른쪽 버튼) 만 가지고 왔다.
내 코드에서의 최상위 테그인 Wrap의 Css요소의 아래에 추가하여 원하는 모습으로 Customizing 하였다.

만약 최상위 테그를 활용할수 없다면 아래와 같이 클래스 선택자를 이용해 미리 선언된 클래스에 접근할 수 있다.

const StyledSlider = styled(Slider)`
      .slick-prev {
    left: calc((100% - 1440px) / 2);
    z-index: 9999;
  }
  .slick-next {
    right: calc((100% - 1400px) / 2);
  }
  .slick-prev:before,
  .slick-next:before {
    ${variables.flex()}
    position: absolute;
    top: -95px;
    width: 40px;
    height: 90px;
    opacity: 0.75;
    border-radius: 30px;
    background-color: #fff;
    color: #6666;
  }
    }
`;

느낀점

라이브러리를 처음 사용 하다보니 적응이 되지 않아서 엉뚱한 코드를 써내리거나 이상한 옵션을 주어서 시간이 많이 걸렸다. 또한, Customizing을 할때 모듈에 있는 Slick Css를 바꾸면서 왜 안되지? 만 몇번 했는지 모르겟다... 그래도 덕분에 여기저기 많이 돌아다니며 더 다양하게 Slick을 활용하는 법을 배웠고 절대 까먹지 않을것 같다.

인생 첫 라이브러리 경험 많이 배웠고 신선했다!