React - React Slick

1. React Slick 소개 

쇼핑몰 사이트나 OTT 서비스 사이트 같은 곳을 방문하면 영화들이 slider 형태로 돌아가는 것을 확인할 수 있다. 

넷플릭스같은 사이트만 봐도 여러가지 콘텐츠를 다음과 같이 한 화면에서 오른쪽 버튼을 누르면 돌아가는 형태의 slider 형태로 콘텐츠를 제공하고 있다. 이러한 컴포넌트를 우리는 carousel이라고 한다. 한글로는 회전목마라는 뜻이다. 이 Slider형태의 컨테이너는 CSS로 구성해도 되지만 React에서는 이 Slider형 컴포넌트에 대한 라이브러리를 제공하고 있다. 바로 React Slick 이다.  

 

---

2. 구현 방법

1. npm을 사용할 경우 

npm install react-slick

2. yarn을 사용할 경우 

yarn add react-slick

먼저 다음과 같은 명령어를 사용하여 react-slick 라이브러리를 import해준다. 

 

그 후 우리는 react-slick component에서 보여줄 컴포넌트(ex card)와 같은 컴포넌트를 만들어야한다. 그저 div태그를 이용하거나 h1태그와 같은 단일 태그를 이용해도 되지만 우리는 좀 더 화려하고 예쁜 콘텐츠 container를 만들어 이 component들을 carousel안에 넣고 돌리면서 보여줄 생각이다. 

slider안에서 보여줄 component이다. 영화관련 정보를 받아와 linkurl과 title, 개봉 연도, 포스터 url, 평점을 받아와 보여주는 component를 만들었다. 

그 후 slider component설정을 한다. 

---

3. React Slick 설정

react slick은 props로 Settings라는 type을 받는다. 이는 slider component의 옵션을 지정할 수 있는 props로 왼쪽 오른쪽 화살표를 표시할 것인지, 자동으로 slider를 넘길 것인지 한 번에 몇 개의 component를 보여줄 것인지 등의 설정을 해줄 수 있다. 

const DEFAULT_SETTINGS: Settings = {
	dots: false,
	arrows: true,
	infinite: true,
	speed: 500,
	slidesToShow: 5,
	slidesToScroll: 5,
	vertical: false,
	autoplay: true,
	prevArrow: (
		<ArrowButton pos="left">
			<MdArrowBackIos />
		</ArrowButton>
	),
	nextArrow: (
		<ArrowButton pos="right">
			<MdArrowForwardIos />
		</ArrowButton>
	),
};

내가 셋팅한 settings옵션이다. ArrowButton같은 경우 react-icons 라이브러리에서 가져왔다. 

나는 autoplay 옵션을 true로 줬기 때문에 가만히 있어도 slider가 저절로 돌아가면서 component를 보여줄 것이다. 

그 후 slider component의 props로 아까 설정한 DEFAULT_SETTINGS를 주고 안에 들어갈 component = children을 ReactSlick으로 감싸주면 끝이난다. 

---

4. React Slick 적용

이것은 현재 상영중인 영화의 정보를 database로 부터 rest api로 받아와 보여주는 page이다. page를 살펴보면 Slider안에 Card component가 있고 axios로 받아온 data를 map 함수로 빙글빙글 돌면서 보여주는 것을 확인할 수 있다. 

이를 웹 환경에서 확인해보면 다음과 같이 나온다. 

하나의 slider안에 내가 넣어준 여러개의 card component가 들어가 있고 아까 설정한 setting대로 5개씩 들어가 있는 것을 확인할 수 있다. 

---

5. 빼먹기 쉬운 것 

React slick은 다음과 같은 기본 css파일을 제공한다. 위의 css 파일을 빼먹으면 결과 화면처럼 나오지 않고 우리가 모든 것을 custom해줘야하는 번거로움이 생긴다.