1차 프로젝트를 진행하면서
내가 맡은 페이지에 이미지를 넘기면서 보여주는 슬라이더 기능이 필요해서 찾아보다가
slick slider 라는 라이브러리를 사용해 보게 되었다.

일단!

라이브러리란?

재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것.
사용 여부는 코드 작성자 선택 사항이며 새로운 라이브러리 제작 시에도 엄격한 규칙이 존재하지 않습니다. 제작 의도에 맞게 작성하면 됩니다.

-출처 https://blog.gaerae.com/2016/11/what-is-library-and-framework-and-architecture-and-platform.html

Slick Slider

설치

npm install react-slick --save

• npm install 을 통해서 설치한다 .
  --save 명령어를 통해 새로운 패키지가 설치 됨을 package.json 파일에 기록 될 수 있도록 한다!**

기본 css 적용

npm install slick-carousel

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

• 기본 css 를 적용 할 수 있도록 slick-carousel 모듈을 설치해주고, 적용을 위한 import를 해준다.

사용하기

import React, { Component } from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

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

• settings 변수에 기본적인 설정들을 설정한 뒤
  컴포넌트에 <Slider {...settings}> 적용시킨 후
  슬라이드 시킬 요소들을 컴포넌트로 감싸서 사용하면 된다.