[React] YTS API로 영화 소개 페이지 만들기(3) - React Slick (slide)

React Slick install

저번 포스팅에서 작성했지만 다시 한 번 제대로 정리해야겠다!

npm i react-slick

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

설치 후 css까지 import 했다.

 

사용법

우선 가이드에 따르면 아래와 같이 적용한다.

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> 내부에 컨텐츠들을 넣어서 슬라이드를 만든다.

처음 사용하는 나도 쉽게 이해할 수 있어서 좋았다!

 

setting 값 설정

const settings = {
    dots: false, //슬라이드 아래에 컨텐츠 갯수 표시
    infinite: true, //무한재생
    speed: 300, //속도
    slidesToShow: 5,//한 번에 보여줄 갯수
    autoplay:true,//자동 재생
    pauseOnHover:true,//hover시에 슬라이드 일시 정지
    arrows:true,//이전, 다음 버튼 사용 여부
    prevArrow:<SamplePrevArrow/>, //custom prev Btn
    nextArrow:<SampleNextArrow/>, //custom next Btn
    responsive: [ //반응형 구현
      {
        breakpoint: 1150,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 950,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 2,
          initialSlide: 2
        }
      },
      {
        breakpoint: 690,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1
        }
      },
      {
        breakpoint: 460,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows: false,
        }
      }
    ]
  };

아직 반응형을 완벽하게 대응하지 못하기 때문에 나는 이렇게 조잡하게나마 설정해보았다..

 

Slide 내부에 map 집어 넣기

<Slider {...settings}>
          {movies.map((movie)=>{
          return <Movie 
            key={movie.id} 
            id={movie.id}
            coverImg={movie.medium_cover_image} 
            title={movie.title} 
            genres={movie.genres}
            rating={movie.rating}
            runtime={movie.runtime}/>
          })}
          </Slider>

이 부분은 내가 너무 어렵게 생각했던 것 같다. 그냥 Slider 아래에 그대로 map을 돌리면 된다.

 

버튼이 왜 없지? - Styled-Components 사용 - 실패.

prev, next 버튼들이 전혀 보이질 않는다. 분명 div로 찍어보면 존재는 하는데 보이질 않는다.

위치가 left, right: -25px로 되어 있었는데, css를 열어서 직접 수정을 해도 전혀 반영이 되질 않는다..

이 것 때문에 몇시간 동안이나 삽질을 했다.. 이를 해결하기 위하여 대표적으로 두 가지 방법을 사용했는데,

첫 번째로 styled-components를 사용하여 react-slick의 css를 수정하는 방법이었다. 이 방법이 먹히나 싶었지만 먹히질 않았다..

import styled from 'styled-components';

const SliderStyle = styled(Slider)`
...
`

열심히 수정해보려고 했지만 씨알도 먹히지 않았다...

 

custom prev, next 버튼

function SampleNextArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{
         ...style, display: "block",
          background: "transparent",
          right:"30px"
        }}
      onClick={onClick}
    />
  );
}

function SamplePrevArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block",
       background: "transparent", 
       left:"30px",
      zIndex:'999'}}
      onClick={onClick}
    />
  );
}

나는 sample을 그대로 사용하되 style 속성으로 css를 조금 바꾸었다. 나는 돌도돌아 겨우 이렇게 해결했다...

 

이로써 react-slick으로 carousel을 완성했다!

나머지는 css로 마무리 했다!