TIL 29. React Slick

주민콩·2021년 1월 24일

React

2차 플젝하면서 원래 페이지에는 Slick을 써서 추천 책을 썼지만 다른 부분에 더 집중하기 위해 그 부분을 뺐었는데 지금 끝난 후에 리팩토링하면서 React-Slick 을 만들어보아따!!!!!!

💻 React-Slick 설치 및 사용법

React-Slick 설치

npm

npm install react-slick --save

저장하기 위해 --save 써주기 !
그 후에 css를 include 해주기 위해

npm

npm install slick-carousel --save

설치 후에 import 해줘야 하기 때문에 GlobalStyles.js에 추가!
index.js 나 캐러셀 파일에 import 해줘도 무관

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

기본적인 Slick 코드

이렇게 작성하면 숫자로 넘어가는 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>
    );
  }
}

하지만 우리는 프론트엔드가 아닌가 ..
setting 을 통해 커스텀을 해야 우리가 원하는 디자인을 만들수 있다!!

🔥 Setting

이렇게 코드를 수정했고 사진, 이름, 저자를 넣어보았습니다

 const settings = {
    dots: true, // 캐러셀의 점을 보여줄 것 인지 
    infinite: true, // 마지막장 다음에 첫장이 나오게 할 지
    speed: 500, // 넘어가는 속도
    autoplay: true, // 자동으로 재생할지
    autoplaySpeed: 1000, //전체적으로 넘어가는 속도
    slidesToShow: 6, // 한 화면에 몇개의 사진을 동시에 보여줄지
    slidesToScroll: 1,
  };

💅🏻 Styled-Component 적용법

slider 자체에 css를 주고 싶었지만 처음엔 기존방식대로 쓰니까 적용이 안되었다..
하지만 구글링 끝에 방법을 찾아따.. !!

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

const StyledSlider = styled(Slider)`
  .slick-slide div{
    outline: none; // 슬라이드 클릭시 파란선을 제거하기 위해서 작성
  }
`;