[React] Slick Slider 사용하기 + TypeScript

Slick Slider는 꽤나 잘 알려진 Carousel 라이브러리다. 리액트에서 사용하려면 리액트용 Slick Slider를 설치해야 한다. 설치부터 사용 방법까지 알아보자.

 

 

 

 

 

React Slick Slider 사용하기

 

1. React 프로젝트 경로에서 npm으로 설치한다.

• react-slick : react slick 설치
• slick-carousel : slick 기본 스타일 css 설치

 

npm install react-slick slick-carousel

 

 

타입스크립트 버전

타입스크립트의 경우 여러 옵션에 타입이 정해져 있어야 하기 때문에 타입스크립트용 react-slick도 설치해주어야 정상적으로 작동한다.

 

 

npm install react-slick @types/react-slick slick-carousel

 

 

 

 

2. Slick Slider를 컴포넌트로 만들어 다른 곳에서 사용할 수 있도록 한다.

 

여러 가지 옵션은 React Slick 홈페이지에서 확인할 수 있다.

 

(src/common/Carousel.tsx)

 

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

const Carousel = () => {
    // 옵션
    const settings = {
        dots: true,
        infinite: true,
        speed: 500
    }

    return (
        <div className="carousel">
            <Slider { ...settings }>
                <div>
                    Slide 1
                </div>
                <div>
                    Slide 2
                </div>
                <div>
                    Slide 3
                </div>
            </Slider>
        </div>
    );
}

export default Carousel;

 

 

 

(적용할 컴포넌트)

 

import Carousel from '../../commons/Carousel'

const Page = (): JSX.Element => {
    return (
   	 <Carousel />
    )
}

export default Page

 

 

 

3. 완성

원하는 대로 CSS를 적용하면 완성이다.

React slick slider