[React.js] react-slick / tailwindcss-animated를 사용한 Animated Drag Carousel 구현하기

최근 진행하는 프로젝트에서 Drag Carousel을 구현해야했었습니다.

 

원래는 직접 구현하려했으나.. 시간이 좀 빠듯하기도 하고 한번 사용해보고싶기도 해서 라이브러리를 뒤져봤는데

react-slick이라는 라이브러리가 있더라구요

 

Neostack

상당히 여러가지 옵션들을 제공하니, 한번 써보시는거 추천드립니다.

직접 구현해보는 것도 좋지만, 저는 css 스타일링하는게 너무 머리가 아팠어요

 

들어가면 예시로 주는 코드가 class로 되어있어서 좀 골치 아프실텐데..

 

import React, {
  PropsWithChildren,
  ReactNode,
} from 'react';

import Slider, {Settings} from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

interface CarouselProps extends PropsWithChildren<{}> {
  settings?: Settings;
  children: ReactNode;
}

export default function DragSlider({children}: CarouselProps) {
  const settings = {
    ...
  };

  return <Slider {...settings}>{children}</Slider>;
}

함수형으로 바꾸자면 이렇게 되겠습니다. 사실 이정도는 쉬울거라고 생각하고,

 

저 settings 안에 설정들을 넣어주시면 Carousel 커스터마이징이 가능합니다.

 

대표적인 옵션들 몇개를 소개시켜드리자면, 

const settings = {
    dots: false, // 하단부에 점으로 현재 슬라이드를 표시해줄지 유무
    initialSlide: 0, // 시작 슬라이드
    slidesToShow: 1, // 한번에 보여주는 슬라이드 개수
    slidesToScroll: 1, // 스크롤 시 넘어가는 슬라이드 개수
    infinite: true, // 무한 캐러셀
    beforeChange: () => {}, // 슬라이드가 넘어가기 직전 실행될 함수
    afterChange: () => {}, // 슬라이드가 넘어간 직후 실행될 함수
 };

정도가 있겠네요, beforeChange를 사용하면 progressBar도 쉽게 직접 만들 수 있습니다! (하단 링크 참조)

 

Neostack

 

그럼 여기까지 해서 Carousel을 만들었는데, 요즘 단순 Carousel만 있진 않죠?

내부에 텍스트도 왕왕 들어가는데, 그냥 넣는건 쉽지만 안에 animation 넣어주기가 여간 귀찮은게 아닙니다.

 

예시도 보여드리고 싶은데, 어차피 다들 아실테니 예시는 생략하도록 하겠습니다

 

필자는 css를 관리하기위해 tailwindcss를 사용하는데, tailwindcss에서 직접 만들면 귀찮은 animate들을 만들어서 제공해주는 라이브러리가 있더라구요

 

Tailwind CSS Animated

tailwindcss-animated라는 라이브러리입니다. 들어가보면 쉽게 테스팅도 가능하고, 속성 복사도 가능합니다

옆에 하나씩 눌러보면 작동되기도 하고, timing, easing 등도 설정 가능합니다.

 

저같은경우는 요소에 fade-up을 적용시키고 싶었는데, 덕분에 편하게 적용시켰습니다.

 

---

 

다 쓰고 나니, 그냥 쓸만한 라이브러리 두개를 추천하는 글이 되어버렸는데

Carousel 또한 웹에서 많이 사용되고, css 프레임워크로 tailwind가 쏠쏠하게 사용되고있는만큼 알아두면 괜찮을 거라고 생각합니다

 

잘 갖다쓰고 (비교적)편한 개발의 삶을 즐겨보세요. 감사합니다