[TIL] 2023.05.09 React-Slick으로 Carousel 구현하기

다음과 같은 Carousel을 구현하기 위해서 React-Slick라는 라이브러리를 사용했다.

 

npm 설치 명령어 및 기초 세팅

npm install react-slick --save
npm i --save-dev @types/react-slick
npm install slick-carousel --save

 

 

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

export default function SimpleSlider() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    
    return (
      <div>
        <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
        </Slider>
      </div>
    );
};

사용하고자 하는 컴포넌트에 Slider 컴포넌트와 css 파일을 import 한 후에 Slider 태그 안에 요소를 추가하면 된다.

 

TypeError: Super expression must either be null or a function 에러 (Next.js 13)

구글링 해봐도 클래스형 컴포넌트 관련 에러 메시지인 거 같은데 도대체 왜 뜨는 건지 한 시간가량을 헤매다가 혹시나 싶어서 해당 파일 최상단에 "use client" 추가해서 클라이언트 컴포넌트로 변경해 봤더니 에러가 바로 해결됐다... Next.js 13 버전을 사용하면서 느낀 점. 뭔가 이상하다 싶으면 일단 클라이언트 컴포넌트로 변경해 보기 ㅎㅎ

 

 

React-Slick에서 각 슬라이드마다 width 설정하기

Slider를 생성하면 각 슬라이드마다 width가 생성된다. default가 304px인가 그랬는데 이걸 내가 원하는 사이즈로 변경하느라 시간이 조금 소요됐다.

 

const settings = {
    variableWidth: true,
    ...
};

...

<Slider {...settings}>
    {temp_array.map((v, i) => (
      <div
        className="relative mb-[10px]"
        style={{ width: 384 }}
        key={i}
      >
     ...
      </div>
    ))}
  </Slider>

결론적으로는 settings에 variableWidth 속성을 추가하고 Slider 내부에 최상위 div에 인라인으로 style을 추가해 주는 방법으로 해결했다.

 

참고 문서

https://poew.tistory.com/707

https://velog.io/@wooya/react-slick-슬라이더-커스텀

https://react-slick.neostack.com/

 

---

회고

라이브러리를 사용할 때마다 느끼는 점이 많다. 이미 구현되어 있는 기능을 설치만 해서 가져다 쓸 수 있기 때문에 기능 구현 시간이 단축되지만, 모든 부분을 내가 원하는 대로 커스텀하기에는 어려움이 있다. 이번에도 react-slick 쓰면서 내가 원하는 UI를 적용하기 위해서 꽤나 고생을 했다. 거기다 아직 낯선 tailwind를 사용하느라 더 어려웠던 거 같기도.. 이제 1차적인 UI 구현은 마무리하고 또 며칠은 개념 공부에 집중해 보려 한다. 화이팅~~!