React-Slick으로 캐러셀 구현하기

라이브러리 설치하기

package.json에 종속성을 추가하기위해 --save를 붙여 설치한다.

npm install react-slick --save

이제 바로 가져다 사용하는데에는 문제가 있으므로 CSS포함하기 위해 아래 명령어로 설치하고 적용하면된다.

npm install slick-carousel --save

컴포넌트 최상단에 적용

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

React-Slick 사용

• 기존 방법

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

export default SimpleSlider () {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  
  return (
    <section>
      <Slider {...setting}>
        a
    	b
        c
      </Slider>
    </section>
    )
}

기존 사용 방법은 위에 내용처럼 작성된 후 .css파일 내에서

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

이렇게 가져와 css를 임의로 수정을 할 수 있다. 하지만 node_modules폴더 내에 설치된 react-slick을 찾아서 선택자를 확인해야하는 번거로움이 단점이다.

수정해야할 부분중에 가장 기본적인 것들만 가져왔다.

  .slick-list {
  }

  .slick-slide div {
    /* cursor: pointer; */
  }

  .slick-dots {
  }

  .slick-track {
  }

이 부분만 건드려도 나한테는 충분했었다.

Style-Components에 적용하기

Style-Components가 여러모로 편리한 CSS In JS 방식인 것 같다. 아래와 같이 불러와서 새로운 스타일을 작성해주면 된다.

import styled, { keyframes, css } from "styled-components";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css"

export const StyledSlider = styled(Slider)`
   height: 90%; //슬라이드 컨테이너 영역

  .slick-list {  //슬라이드 스크린
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow-x: hidden;
    background: green;
  }

  .slick-slide div { //슬라이더  컨텐츠
    /* cursor: pointer; */
  }

  .slick-dots {  //슬라이드의 위치
    bottom: 20px;
    margin-top: 200px;
  }

  .slick-track { //이건 잘 모르겠음
    width: 100%;
  }
`;

이제 가져와서 컴포넌트에 적용하면된다.

export default SimpleSlider () {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  
  return (
    <section>
      <StyledSlider {...setting}>
        a
    	b
        c
      </Slider>
    </section>
    )
}



### 커스텀 버튼 만들기

#### 1. 기존 커스텀 버튼 수정
 - 함수 생성
```js
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}
    />
  );
}

• 적용하기

export default SimpleSlider () {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />
  };
  
  return (
    <section>
      <Slider {...setting}>
        a
    	b
        c
      </Slider>
    </section>
    )
}

이렇게 nextArrow와 prevArrow에 컴포넌트를 가져오면된다.

또 다른 방법으로는 아예 버튼으로 추가할 수 있는데 useRef()를 활용하면된다.

2. 새로운 버튼 생성

import { useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";

export default SimpleSlider () {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  
  
  const slider = useRef(null);

  const target = (tg) => {
    slider.current = tg;
  };
  const nextBtn = () => {
    slider.current.slickNext();
  };

  const prevBtn = () => {
    slider.current.slickPrev();
  };
  
   const tabTitle = ["a", "b", "c", "d"];

  const tabContent = {
    0: <A setting={settings} target={target} />,
    1: <B setting={settings} target={target} />,
    2: <C setting={settings} target={target} />,
    3: <D setting={settings} target={target} />,
  };

  return (
    <section>
     <TabList>
        {tabTitle.map((menu, idx) => (
            <TabMenu key={idx} onClick={() => dispatch(activeTabs(idx))}>
                {menu}
            </TabMenu>
          ))}
       </TabList>
      <StyledSlide>
    {tabContent[activeTabs]}
    <button onClick={nextBtn}>이전</button>
    <button onClick={prevBtn}>다음</button>
      </StyledSlide>
    </section>
    )
}

uesRef()로 특정 DOM을 선택하는 방식으로 Slide를 넘길 수 있다.

Setting 옵션들

  dots: true,     // 슬라이드 밑에 점 보이게
  infinite: true, // 무한으로 반복
  speed: 500,     // 넘기는 속도
  autoplay: false, // 자동으로 넘김
  autoplaySpeed: 2000, //자동으로 넘어가는 속도
  slidesToShow: 1,    // 스크린에 보여지는 슬라이드 개수
  slidesToScroll: 1,  // n장씩 뒤로 넘어가게 함
  centerMode: true,   // 중앙정렬
  centerPadding: "0px", // 0px 하면 슬라이드 끝쪽 이미지가 안잘림
  nextArrow: <>  // 슬라이드 좌우 넘기기 커스텀 버튼
  prevArrow: <>  //슬라이드 좌우 넘기기 커스텀 버튼