🌈 React 라이브러리 slick-slide사용방법

React-Slick

리액트 슬라이드 라이브러리
📝 SimpleSlider 사용법
공식 사이트 👉 https://react-slick.neostack.com/

이번 2주차 프로젝트에서 메인에 사용된 React-slick, 내가 생각했던것보다 어려웠기에 한번 글을 남긴다....😱

🌀 React-slick 설치방법

👉 기본 설치와 슬라이더의 css작업을 위한 npm 두가지 모두 설치해야한다.

✅ 슬라이더의 기본 형태는 공식문서에 들어가면 이렇게 샘플코드가 나와있다.

✏️ slick을 적용시킨 나의 코드

const RECOMMENT_SETTING = {
  dots: true,
  infinite: true,
  speed: 700,
  slidesToShow: 5,
  slidesToScroll: 5,
};

<Slider {...settings}>
              {slideData &&
                slideData.map((data, index) => {
                  return (
                    <div className="slideCard" key={index}>
                      <img
                        src={data.product_url}
                        alt={`${data.id}번 이미지`}
                        className="cardImg"
                      />
                      {recommend ? (
                        <div className="productIntro">{data.intro}</div>
                      ) : (
                        <div className="realTimeSlideRight">
                          <div className="realTimeIntro">
                            {data.review_text}
                          </div>
                          <div className="realTimeName">{data.name}</div>
                        </div>
                      )}
                    </div>
                  );
                })}
            </Slider>

✅ Slick-slide를 사용해본 결과 코드를 적용시키는 것은 크게 어렵지 않았지만 scss 속성을 입히는게 생각보다 힘들었다. 개발자도구에서 slick자체에서 입련된 클래스명을 찾고 거기서 속성값을 입력해야한다는 약간의 번거러움이 있었지만, 라이브러리를 내 코드에 적용시켜볼 수 있는 좋은 기회였다. 😆