[React] React Slick 라이브러리 사용법 - 캐러셀 구현하고 커스터마이징하기

미리보기

 

 

 

 

React-Slick 설치하기

npm i react-slick
yarn add react-slick

npm i slick-carousel
yarn add slick-carousel

위와 같이 필요한 라이브러리를 설치해준다.

 

 

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

라이브러리를 다 설치했다면 위와 같이 import 해준다.

css를 수정하고 싶다면 두번째와 세번째 줄도 빼먹지 않고 import 해준다.

 

 

 

React-Slick 사용하기

react slick의 기본 코드는 다음과 같다.

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>
    );
  }
}

 

 

 

 

Slider 태그로 슬라이드에 들어가는 내용을 감싸면 된다.

나는 슬라이드 안에 들어갈 콘텐츠를 Item이라는 컴포넌트를 만들어서 각각의 내용물을 props로 받기 위해 map을 사용하여 다음과 같이 적용하였다.

return (
    <Wrap>
      <Slider ref={slickRef} {...settings}>
        {Dummy.articles.map((article) => (
          <Item key={article.id}>
            <Thumbnail src={article.img}></Thumbnail>
            <Class>환경 아티클</Class>
            <Title>{article.title}</Title>
            <Info>
              <p>{article.date}</p>
              <p>by {article.writer}</p>
            </Info>
          </Item>
        ))}
      </Slider>
    </Wrap>
 );

 

•  공식 문서 참고

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

Neostack

 

 

 

Slider 커스텀하기

settings를 통해 css를 변경할 수 있다.

const settings = {
      dots: true,	 // 슬라이드 하단에 있는 작은 동그라미 여부
      arrows: true,	 // 양 옆의 화살표 버튼 여부
      infinite: true,	 // 슬라이드를 무한으로 회전시킬지 여부
      speed: 500,	 // 넘어가는 속도, 단위는 ms로 500이면 0.5초를 의미
      slidesToShow: 1,	 // 한번에 보여줄 슬라이드의 개수
      slidesToScroll: 1	 // 넘길 때 몇 개씩 넘겨줄지
    };

 

슬라이드가 자동으로 넘어가게 하는 속성도 있다.

autoplay: true | false,		// 슬라이드 자동으로 넘어가게 할지 여부
autoplaySpeed: number,		// 슬라이드가 자동으로 넘어가는 속도
cssEase: 'liner'		// 슬라이드의 이동 스타일 지정

 

 

Slider를 감싸는 부모 태그 Wrap을 만들어서 다음과 같이 Slick Slider의 css를 바꿔줄 수 있다.

const Wrap = styled.div`
  overflow: hidden;	// 화면에서 넘어가는 콘텐츠를 숨김 처리
  display: flex;
  flex-direction: row;
  .slick-list {		// 슬라이드 스크린
    width: 776px;
    height: 248px;
  }
  .slick-prev::before,	// 양쪽 화살표
  .slick-next:before {
    opacity: 0;	
    display: none;	// 기존의 화살표 버튼을 안보이게
  }
`;

개발자 도구 켜서 요소들을 확인하다보면 .slick-list나 화살표 버튼 등을 볼 수 있는데 원하는 대로 요소들의 스타일을 바꿔주면 된다. 나도 사실 화면에서 이상한 부분들 확인하다가 위의 요소들을 발견해서 알게 되었다.

 

화살표 커스텀하기

• 방법 1

내가 적용한 방식인데, 캐러셀을 처음 구현해봐서 이 블로그 저 블로그 찾아보면서 해본거라, 다 짜고 나서 더 알아보니까 정석적인 방식은 아니더라. 그치만 어찌됐든 됐으니 이것도 올려봄.

  const slickRef = useRef(null);

 

  const prevArrow = useCallback(() => slickRef.current.slickPrev(), []);
  const nextArrow = useCallback(() => slickRef.current.slickNext(), []);

위의 코드들 추가해주고 (맨위에 useCallback, useRef 임포트하는거 잊지 말기!)

 

return (
    <Wrap>
      <PrevBtn onClick={prevArrow}>	// 왼쪽 화살표 버튼
        <img src={PrevArrow} />	// 화살표 이미지로 설정
      </PrevBtn>
      <Slider ref={slickRef} {...settings}>
        {Dummy.articles.map((article) => (
          <Item key={article.id}>
            <Thumbnail src={article.img}></Thumbnail>
            <Class>환경 아티클</Class>
            <Title>{article.title}</Title>
            <Info>
              <p>{article.date}</p>
              <p>by {article.writer}</p>
            </Info>
          </Item>
        ))}
      </Slider>
      <NextBtn onClick={nextArrow}>	// 오른쪽 화살표 버튼
        <img src={NextArrow} />	// 마찬가지로 이미지로 설정
      </NextBtn>
    </Wrap>
  );

Slider 태그의 위, 아래(화면상으론 왼쪽, 오른쪽)에 화살표 컴포넌트를 만들어준다.

 

const PrevBtn = styled.button`
  position: relative;
  left: 0;
  border: none;
  background-color: white;
  margin-right: 36px;
`;

const NextBtn = styled.button`
  right: 0;
  border: none;
  background-color: white;
  margin-left: 36px;
`;

 

 

• 방법 2

라이브러리를 최대한 활용하는 느낌?의 방식으로, 작성해줘야 하는 코드가 조금 더 간편한 느낌이라 일반적으로 적용할 수 있을 것 같다.

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

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

이전 화살표와 다음 화살표 컴포넌트를 각각 만들어준다.

이렇게 className, style, onClick을 props로 받을 수가 있고, styled props에서 원하는 스타일링을 해줄 수도 있다.

 

const settings = {
  ...
  prevArrow: <PrevArrow />,
  nextArrow: <NextArrow />
}

settings의 prevArrow, nextArrow 속성에 방금 만든 화살표 컴포넌트를 넣어주면 된다.

 

<div style={{ position: 'absolute', top: -20, right: 5 }}>
  <Image
    src='../assets/prevBtn.png'
    width={24}
    height={24}
    className='arrow'
    onClick={onClick}
   />
</div>

아니면 이런식으로 버튼을 이미지로 설정해줄 수도 있다.

 

 

정리하면

방법 1은 Slider 태그 있는 쪽에 styled component를 이용해 스타일링한 화살표 컴포넌트를 태그로 넣어주는 방식이고,

방법 2는 settings 안에 props를 받아 커스텀한 화살표 컴포넌트를 속성으로 넣어준다는 것이다.

 

 

 

---

두번째 방법으로는 한 번 다른 프로젝트 하는 거에서 적용을 해보고, 기록을 남겨야겠다.

배너라든지 좌우로 슬라이드해서 콘텐츠 보여주는 거라든지 앞으로 종종 꽤 쓰게 될 것 같은데, 라이브러리를 사용하니까 직접 구현하는 것보다 괜찮은 것 같아서 한 번 정리해보았다.