[Library] 슬라이더 라이브러리(react-slick)

mokyoungg·2020년 7월 22일

기업협업 작업에 슬라이더 기능이 필요하여 라이브러리를 사용하였다.
사용한 라이브러리는 slick이다.
개발을 시작하고 처음 라이브러리를 사용해보았다.
라이브러리의 문서는 친절하였으나 나는 떠먹여주는 수준까지 원했다.
어느 글을 찾아보아도 그 정도 수준의 글은 없었다.
그래서 내가 쓴다.

0. 내가 필요한 라이브러리 찾기

나의 경우, 라이브러리에 대해선 말만 들었다. 그것의 존재 여부만 알고 있었다.
이것을 쓰면 편하다. 누군가 만들어 놓은 코드를 가져와서 쓰면 된다.
이 말을 듣고 기존의 내가 가지고 있는 생각은
"아 그럼 이걸 그대로 복붙해서 쓰면 되는구나" 였다.
근데 안 되더라. 그런데 그 전에 무슨 라이브러리를 써야하는건가.

아마 다른 사람들도 라이브러리를 최초 검색할 때 구글을 사용할 것이라 믿는다.
구글 slider library 라고 쓰면 많은 페이지가 검색된다. 그리고 들어가면 영어다. 영어.
이전 코드카데미에서 html과 js를 배우면서도 느꼈지만,
영어와 개발 언어의 콤비네이션은 사람의 정신 에너지를 빠른 속도로 고갈시켜 포기하고 싶게 만든다.

아무튼
그것의 사용 설명까지는 내가 어떻게 해결할 수 있는 부분이 아니다. 구글 번역이 답이다.

앞서 말한 질문 '무슨 라이브러리를 써야하는가'에 대한 답은 다음과 같다.

Openbase : https://openbase.io/

라이브러리 사용을 위한 검색과 하이퍼링크, 하이퍼링크의 하이퍼링크 그 쯤에 만난 사이트다.
아마 라이브러리를 정리한 웹인 것 같다. 해당 웹의 실제 설명은 다음과 같다.

"We're on a mission is to help developers choose among millions of open-source packages. In a world with so many open-source packages, we want to ensure developers find the right package quickly, so they can focus on what they do best - build amazing products." - 출처 openbase

해당 웹에서 필요한 기능이나 라이브러리를 찾으면 나보다 앞서 개발에 시작한 수많은 개발자들이 그것에 대해 평점을 매겼다. 나는 그 점수를 보고 가장 높은 평점의 그것을 쓰면 된다.
슬라이더의 경우에는 slick 이었다.(아닌가) *react-slider 라고 검색하는 것이 좋다.

1. Slider Library 설치하기

library의 documentaion을 보면 일단 설치는 할 수 있다.
보통은 아주 친절하게 설명되어 있다.

slick web : https://react-slick.neostack.com/
openbase : https://openbase.io/js/react-slick

설치는 다음과 같다.

npm install react-slick --save

2. Slider 작동시켜보기

어떤, 정말, 굉장히, 친절한 라이브러리의 경우,
공식 페이지가 있으며 이곳에서 자신들의 라이브러리 기능에 대한 예시를 보여준다.
slick은 이러한 경우다.

아무튼 이러한 예시는 매우 중요하다고 할 수 있는데
그 이유는, 코드나 문서를 보고 짐작 후 바로 실행이 가능한 프로 개발자와는 달리
초보 개발자는 일단 최대한 이것과 비슷하게 만들어보고
그 다음에 자신의 코드를 조금씩 써봐야하기 때문이다.(나는 그렇다.)

이런 얘기를 하는 이유는 라이브러리에서 제공하는 css가 있기 때문이다.
이것도 같이 사용해야 비슷하게 만들어 볼 수 있다.

slick의 경우, css를 import 하지 않아도 어느 정도 알아볼 수 있었던 것으로 기억한다.
그러나 다른 라이브러리의 경우에는 그렇지 않다. 거의 뭐 아수라장이다.
그러니 import 해야할 css가 있으면 하자.

// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

슬라이더가 들어가는 컴포넌트에서 import 해주자.
그리고 일단 내 컴포넌트를 어떤 모양으로 만들던 상관없이 일단 슬라이더를 화면에서 보자.

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

위의 코드의 출처는 slick홈페이지다.
이렇게 하면 slick 홈페이지 나오는 슬라이더가 보여야한다.
그 다음에 이것 저것 코드를 수정하며 상황을 지켜보자.

3. slider 사용

작동을 시켜보고 이것저것 건드려보면 뭔가 느낌이 온다.
아 어쩌면.. 이것은. 이렇게 하는 것인가. 그런 느낌.

slick 라이브러리에서 건드려야 하는 부분은 크게 두 가지이다.

하나는 setting이고 다른 하나는 슬라이더에 들어가는 내용이다.

setting의 경우에는 나도 잘 모른다.
예를 들어 이미지라면,
슬라이더에 몇개의 이미지가 보이게 할 것인가.
작동시에는 몇개의 이미지가 이동하는가.
넘어가는 속도는, 무한으로 즐길 수 있는가. 이 정도?
아마 공식 홈페이지에 매우 자세하게 작성되어 있을 것이다.(하지만 영어다)

슬라이더에 콘텐츠 넣기.
실제로 내가 작성한 코드이다.

import React, { Component } from "react";
import Slider from "react-slick";
import SlideContent from "./SlideContent";
import styled from "styled-components";

const Slide = ({ data, handleRen }) => { //부모 컴포넌트에서 받은 state와 method

  //settings 부분, 슬라이더의 기능을 조정할 수 있다.
  const settings = {
    dots: false,  // 점은 안 보이게
    infinite: true, // 무한으로 즐기게
    speed: 500,
    slidesToShow: 4, //4장씩 보이게 해주세요
    slidesToScroll: 1, //1장씩 넘어가세요
    
    responsive: [ // 반응형 웹 구현 옵션
      {
          breakpoint: 1200, // 화면 사이즈 1200px
          settings: {
            slidesToShow: 3,
          }
      },
      {
        breakpoint: 1023,
        settings: {
          slidesToShow: 3
        }
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1
        }
      }
    ]
  };
  return (
    <Wrap>
      <Slider {...settings}> //Slider 태그, 위에서 설정한 슬라이더가 나옴
        {data.map((data) => {
          return <SlideContent data={data} handleRen={handleRen} />;
        })} //Slider 안에 들어가는 내용(콘텐츠)
      </Slider>
    </Wrap>
  );
};

export default Slide;

형태는 다음과 같다. slider를 import하고 그에 대한 setting을 지정한다. 그리고
Slider 태그로 슬라이더에 들어가는 내용을 감싸면 된다.
공식 홈페이지에 나와있는 코드와 똑같다.

공식 홈페이지는 div 태그를 사용했지만 나는 Slider 태그 안에서
SliderContent라고 부르는 (내가 만든) 컴포넌트에 map을 돌렸다.

끝이다. 그럼 슬라이더가 구동한다.
Slider 안에 들어가는 것은 꼭 컴포넌트이거나 map을 돌리거나 할 필요가 없다.
img 태그를 쓰든 div 태그를 쓰든 그냥 들어가는 콘텐츠면 된다.

4. 슬라이더 꾸미기

slick은 매우매우 친절하다. 처음 라이브러리를 써본 내가 사용 가능하니..
그러나 매우 깊은 고통을 주는 부분이 css부분이다. 꾸미기?

나의 경우에는 슬라이더 하단에 나오는 점을 없애고
화살표 버튼으로 슬라이더를 이동시키고 싶었다.
setting에서 dot 값을 조정하여 점을 없앴지만 화살표 버튼은 어떻게 하는가.
google에서 찾아봤자 영어문서이니 같은 영어라도 영상으로 보면 어떨까 싶어 유튜브에
검색하니 나와 같은 고민을 하는 지구촌 사람들을 위한 영상이 있었다.

코드는 다음과 같다.(나는 컴포넌트 수정에 스타일 컴포넌트를 사용했다.)

const Wrap = styled.div`
  margin: 5% auto;
  width: 100%;
  .slick-prev:before {
    opaicty: 1; // 기존에 숨어있던 화살표 버튼이 보이게
    color: black; // 버튼 색은 검은색으로
    left: 0;
  }
  .slick-next:before {
    opacity: 1;
    color: black;
  }

여기서 Wrap은 3번에서 나오는 코드의 그 Wrap이 맞다.
주목할 부분은 .slick-prev:before 또는 .slick-next:before 를 통해
slick 슬라이더의 화살표 버튼을 조정할 수 있다는 것이다!

놀랍다.
사실 개발자 도구에서 슬라이더 부분을 살펴보면 화살표 버튼이 있다는 것을 알 수 있다.(Elements로 이것 저것 보면 있음)
아무튼 이렇게 하면 해낼 수 있다. 화살표 버튼이 컴퓨터가 아닌 내 눈에도 보인다.

글을 쓰면서 느낀건데 slick-slider가 아니고 react-slick이 공식 명칭이고
slider보단 carousel 이라고 부르는 것 같다.
이러한 형태는 슬라이더가 아닌 것인가!
아무튼 미래에 슬라이더인지 carousel인지 이것을 다시 쓸 내가 잘 이해했으면 좋겠다.