[Wikea] react-slick으로 Carousel 만들기

letthere·2021년 2월 3일
0

Wikea Project

목록 보기
1/6

Carousel 🎠

회전목마처럼 요소들을 순환시키는 구성요소로, 슬라이드 형태로 이미지나 영상등을 보여주는 것을 의미한다.

사용 목적

내가 맡은 이케아 웹사이트의 메인 페이지에서 진행중인 이벤트 및 프로모션, 추천제품, 신제품을 보여주는 컴포넌트를 캐러셀 형식으로 구현해야 했다. 직접 만드는 방식과 라이브러리를 이용하는 방식 중 고민한 결과, 이전까지 라이브러리를 활용해본 적이 없어 라이브러리를 실전에서 활용하는 방법을 연습해보고 싶었다. 따라서 사용 빈도가 높고 여러 유용한 옵션을 제공하면서 공식 문서가 잘 작성된 react-slick을 사용하여 만들어 보고자 했다.

사용 방법

  1. 설치

yarn add react-slick

yarn add slick-carousel

  1. 초기 셋팅
const initialSettings = {
  dots: true, // 캐러셀의 점 출력 여부 
  infinite: true, // 무한 반복 여부  
  speed: 500, // 넘기는 속도 
  arrows: true,
  autoplay: true,
  autoplaySpeed: 2300,
  pauseOnHover: true,
  className: '',
  slidesToShow: 3,
  slidesToScroll: 1,
  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,
      },
    },
  ],
};
import styled from 'styled-components';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

export default function Carousel({
  data,
  ItemComponent,
  setting = initialSettings,
}) {
  return (
    <Container>
      <Slider {...setting}>
        {data.map(item => (
          <ItemComponent data={item} key={item.id} />
        ))}
      </Slider>
    </Container>
  );
}

구현 결과

공식 문서를 꼼꼼히 읽으며 진행하니 사용 방법은 생각보다 간단했다. 하지만 라이브러리를 쓰기 전에 이를 사용하는 게 적절한 상황인지 파악하는 게 중요할 것이다. 이번에 이렇게 라이브러리를 활용 방법을 경험해보면서 무척 편리함을 느꼈고, 새삼스럽게 개발자들의 공유 문화는 정말 어썸하구나! 라는 생각을 다시 한 번 했다. 이런 라이브러리를 언젠가 만들 수 있을 날까지 열심히 해보자✨✨

0개의 댓글