231223_TIL : 슬라이더 라이브러리 react-slick 사용하기

기존 프로젝트에서 자바스크립트로 만든 슬라이드가 있었으나 프로젝트 구조 변경 시 뭐가 좀 꼬여서

영화 카드가 제대로 보이지 않는 문제가 생겼다.

 

이렇게 마지막 영화카드가 잘려서 나옴

 

슬라이드 라이브러리를 사용해보고 싶기도 했어서

검색을 해보니 react-slick 이라는 라이브러리가 있었다. 

 

공식문서

Neostack

 

 

설치

설치는 공식문서 보고 설치해주면 된다.

//react-slick 설치
npm install react-slick --save

//css도 같이 설치해줘야 한다
npm install slick-carousel --save

//슬라이더를 사용할 파일에 css import해오기
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";

 

공식문서에는 css를 가져올 때 앞에 ~(물결표시)를 해주는데 그렇게하니 에러가 난다.

검색해보니 다른분들도 다들 ~를 빼고 import하니 잘 됐다고 하여 빼고 임포트해왔다.

 

 

슬라이드 사용 및 커스텀 변경

공식문서에는 여러가지 slider 종류가 있는데 상황에 알맞게 알아서 들고오면 된다.

나는 나중에 반응형을 만들거라 반응형 슬라이드를 들고 왔다.

또 공식문서에는 클래스형으로 되어있어서 함수형으로 바꿔줬다.

import React from "react";
import Slider from "react-slick";

export default function MySlider {
    var settings = {
      dots: true,
      infinite: false,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 4,
      initialSlide: 0,
      arrow: true,		//화살표 아이콘 표시
      draggable: false,		//드래그로 슬라이드 움직임 방지
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
            initialSlide: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    };
    return (
      <div>
        <h2> Responsive </h2>
        <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
...
          <div>
            <h3>7</h3>
          </div>
          <div>
            <h3>8</h3>
          </div>
        </Slider>
      </div>
    );
}

 

settings는 슬라이더의 여러 설정 속성들이 있는데 내가 원하는대로 변경이 가능하며,

코드에 나와있는 것들 외의 것도 공식문서를 보고 추가적으로 변경할 수 있다.

 

css를 수정할 때는 노드모듈에 있는 css 파일을 복사해서 복사본에서 수정하여 적용한다.

복사하는 이유는 노드모듈의 css 파일을 수정하면 재빌드를 해야하는 번거로움이 생기기 때문.

그리고 css 파일만 복사하면 안되고, font폴더와 ajax-loader.gif 파일도 같이 복사해서 slider 폴더를 만들고 그 안에 같이 넣어준다.

//내가 css 수정한 부분
.slick-slide {
  padding: 0 10px;		//item간의 간격 조절
}

 

이렇게 해서 react-slick을 사용할 수 있다.

 

 

에러해결

이 에러는 기존 컴포넌트에서 데이터를 가져와서 출력했던 것을

슬라이더 컴포넌트를 새로 만들고 거기서 데이터 패치 후 가져오려는 과정에서 발생한 것이다.

const [movieList, setMovieList] = useState(null);

const SERVER_API = `https://`;

useEffect(() => {
  fetch(SERVER_API)
    .then((response) => response.json())
    .then((result) => {
      const result = await response.json();
      setMovieList(result);
    })
    .catch((e) => console.log(e));
}, []);

 

 

여기서 movieList.data를 콘솔에 찍었을 때 data를 찾을 수 없다는 에러가 생겼다.

TypeError: Cannot read properties of null (reading 'data')

나는 데이터를 가져오는 작업에서 비동기적인 방식으로 data를 불러와서 그런건줄 알았다.

그런데 그것이 아니고 정말 타입에러였다.

 

위에 movieList의 초기값을 null로 지정해줬는데, console.log(movieList.data) 라는 코드에서는 이 movieList가 객체인지 아닌지 확인할 수 없으므로 에러가 났다.

비슷한 예로 movieList.map() 을 했어도 에러가 났을 것이다. movieList가 배열인지 아닌지 알 수 없으므로.

 

그래서 초기값을 빈배열로 잡아두고

result값을 수정하여 setMovieList에는 바로 배열데이터가 들어가도록 했다.

 

  const [movieList, setMovieList] = useState([]);		//빈배열

  const SERVER_API = `https://`;

  useEffect(() => {
    fetch(SERVER_API)
      .then((response) => response.json())
      .then((result) => {
        const res = result.data;	//배열데이터
        setMovieList(res);
      })
      .catch((e) => console.log(e));
  }, []);

 

 

이렇게 하니 정상출력 되었다.

 

 

 

결과물

깔-끔

 

 

 

참고:

https://velog.io/@dlatlgns00/React-React-Slick-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%BB%A4%EC%8A%A4%ED%85%80%ED%95%98%EA%B8%B0

[ React ] React-Slick 라이브러리 커스텀하기