2022.01.15(Sat.) <Typescript에서 slick-carousel 만들기>

우리의 프로젝트도 빙글빙글 돌려 봅시다.

1. 문제의 발단

포트폴리오를 역시나 만들고 있는 중에, 프로젝트나 설명 부분에 옆으로 넘어가는 디자인을 만들면 가독성도 좋고 디자인도 뛰어 날 것이라고 생각했다. '라이브러리를 사용하자!'라는 생각은 있었다만, 아직 익숙하지 않은 타입 스크립트와 생각보다 css를 적용하는 부분이 헷갈렸다. 그래서 복습하고자 이 글을 작성하고 있다.

2. Carousel VS Slider

이 친구는 이미지 슬라이드가 아닙니다. 케러솔 입니다.

얘가 슬라이더 입니다.

• 구글링을 하다가 알게 된 사실이다. 생각해 보니 슬라이더는 저렇게 음량등을 조절할 때 사용하는 것이었다!
• 저렇게 사진이나 내용들이 넘어가는 것은 'Carousel'이다. 한국말로는 회전목마.  

2. 사전 작업은 어떻게 합니까?

• 우리가 install 해야 할 것은 총 3개
• npm install --save @types/react-slick
• npm install --save react-slick 
• npm install --save slick-carousel
• 위의 3가지를 모두 install 해야 한다. 그래야 올바르고 쉽고 간편하게 기능하게 만들 수 있다.
• 그리고 사용할 tsx 파일위에 또 3가지 내용을 import 한다.

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

• css 파일을 따로 불러줘야 한다. 아니면 옆으로 넘길 수 있는 화살표나 지금 어떤 내용을 보고 있는지를 표시하는 점(Dots)이 안 나온다.

3. 일단 코드 쳐 보기

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

function Carousel() {
	const settings = {
    	dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
    }
    // 사용할 Carousel의 기본 세팅을 해준다. props로 받아 와야 하기 때문에 객체에 넣어서 받아온다.
    // 더 많은 설정이 있지만, 그것은 직접 코드를 뜯어 보면 쉽게 알 수 있다.
    // 위의 설정은 홈페이지에 나와있는 기본 설정을 한번에 보여줄 갯수만 1개로 바꾼 것이다.
    
    <section className="page-carousel">
    	<Slider {...settings}>
        	<div>거창한 내용</div>
            <div>대단한 내용</div>
            <div>멋있는 내용</div>
            <div>예쁜 내용</div>
            <div>무언가 엄청난 내용</div>
        </Slider>
    </section>
}

export default Carousel;

• 이렇게 하면 기본적인 케러솔을 볼 수 있다. 위의 예시 그림과 비슷하게 만들어질 것이다. 기본적인 css는 적용되어 있고, 기능 또한 적용되어 있다.

4. 커스텀하기

• 이대로 쓰면 모두가 똑같은 디자인과 UI를 가지게 될 수 있으므로, 조금 바꿔본다.

화살표 커스텀

• 화살표는 이미지 혹은 아이콘 뭐든지 가능하다. 아에 컴포넌트로 만들어 넣을 수 있다.
• 그러므로 tsx 파일인 NextArrow.tsx 파일을 만들었다.

import React from "react";

interface NextArrowProps {
    onClick?: React.MouseEventHandler<HTMLDivElement>;
}
// 타입스크립트를 사용하기 때문에 onClick 이벤트를 props로 받아준다.
// className을 받아줄 수 도 있다. 그리고 부모 컴포넌트에서 설정해 줘도 된다.

export default function NextArrow({ onClick }: NextArrowProps) {
    return <div className="next-arrow" onClick={onClick}>누르면 넘어감</div>;
}

• html 태그를 img로 바꿔서 이미지를 넣을 수 도 있다. css를 설정하면 마음대로 사용할 수 있다.
• 하지만 css가 조금 곤란하다. 원래 있던 slick 자체 테마에 있던 위치 설정을 해놓은 css들을 일단 모두 써 놓고, 이후에 조금씩 바꿔 가는 방향으로 작업해야 원하는 위치에 화살표를 위치시킬 수 있다.

.next-arrow {
    right: -25px;
    font-size: 20px;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    transition: 200ms ease-in-out;

    &:before {
        line-height: 1;
        opacity: 0.75;
        -webkit-font-smoothing: antialiased;
    }
}

• 위의 코드가 거의 기본 코드일 것이다(조금 다를 수 있다. 뭔가 이상하다면 크롬 개발자 도구를 이용해 원래 태마에서 화살표의 css를 그대로 복사해서 붙여 넣고 작업하면 된다). 태그와 설정들을 마친 후에 css 작업할 때 붙여놓고 보면서 원하는 위치를 잡는다.
• 그리고 부모 컴포넌트인 Carousel로 다시가서 세팅을 바꿔준다.

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import NextArrow from "../components/NextArrow";

function Carousel() {
	const settings {
    	dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        nextArrow: <NextArrow />
    }
    // nextArrow에 불러온 <NextArrow />를 설정해 준다. 그러면 바뀐 화살표를 볼 수 있다.
    
    <section className="page-carousel">
    	<Slider {...settings}>
        	<div>거창한 내용</div>
            <div>대단한 내용</div>
            <div>멋있는 내용</div>
            <div>예쁜 내용</div>
            <div>무언가 엄청난 내용</div>
        </Slider>
    </section>
}

export default Carousel;

Dots 커스텀

• dots는 className을 다르게 설정해서 적용할 수 있다. 화살표처럼은 컴포넌트 자체로는 안 되는 것 같다.
• 하지만 css는 화살표와 마찬가지로 기본 설정을 똑같이 뺏겨와서 설정한 후에 조절해야 한다.
• 일단, 부모 컴포넌트인 Carousel.tsx를 설정한다.

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import NextArrow from "../components/NextArrow";

function Carousel() {
	const settings {
    	dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        nextArrow: <NextArrow />,
        dotsClass: "custom-dots"
    }
    // dotsClass에 클레스를 설정해 준다. 그러면 바뀐 Dots를 볼 수 있다.
    
    <section className="page-carousel">
    	<Slider {...settings}>
        	<div>거창한 내용</div>
            <div>대단한 내용</div>
            <div>멋있는 내용</div>
            <div>예쁜 내용</div>
            <div>무언가 엄청난 내용</div>
        </Slider>
    </section>
}

export default Carousel;

• 그리고 css를 바꾸자.

.custom-dots {
    position: absolute;
    bottom: -15px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.custom-dots li {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.custom-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 40px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.custom-dots li button:before {
    font-family: "slick";
    font-size: 2rem;
    line-height: 20px;
    position: absolute;
    top: 10px;
    left: 20px;
    width: 20px;
    height: 20px;
    content: "*";
    text-align: center;
    opacity: 0.9;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.custom-dots li.slick-active button:before {
    opacity: 1;
    color: #ffffff;
    content: "*";
}

• 이것이 원래 dots의 css일 것이다. (근데, 진짜 확실하지 않다. 이미 너무 많은 것을 바꿔버렸다. 개발자 도구를 이용해 꼭 기본 css 세팅이 된 내용을 복사해서 가지고 와서 붙여놓고 바꿔보자)
• 여기까지 하면 바뀐 내용들을 볼 수 있을 것이다.