회전목마처럼 요소들을 순환시키는 구성요소로, 슬라이드 형태로 이미지나 영상등을 보여주는 것을 의미한다.
내가 맡은 이케아 웹사이트의 메인 페이지에서 진행중인 이벤트 및 프로모션, 추천제품, 신제품을 보여주는 컴포넌트를 캐러셀 형식으로 구현해야 했다. 직접 만드는 방식과 라이브러리를 이용하는 방식 중 고민한 결과, 이전까지 라이브러리를 활용해본 적이 없어 라이브러리를 실전에서 활용하는 방법을 연습해보고 싶었다. 따라서 사용 빈도가 높고 여러 유용한 옵션을 제공하면서 공식 문서가 잘 작성된 react-slick을 사용하여 만들어 보고자 했다.
yarn add react-slick
yarn add slick-carousel
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>
);
}
공식 문서를 꼼꼼히 읽으며 진행하니 사용 방법은 생각보다 간단했다. 하지만 라이브러리를 쓰기 전에 이를 사용하는 게 적절한 상황인지 파악하는 게 중요할 것이다. 이번에 이렇게 라이브러리를 활용 방법을 경험해보면서 무척 편리함을 느꼈고, 새삼스럽게 개발자들의 공유 문화는 정말 어썸하구나! 라는 생각을 다시 한 번 했다. 이런 라이브러리를 언젠가 만들 수 있을 날까지 열심히 해보자✨✨