[React / 2차 프로젝트] react-slick 적용법

 

[React / 2차 프로젝트] react-slick 적용법

 

2차 프로젝트부터는 라이브러리를 써보게 되었다. 1차 프로젝트에서는 학습을 위해 지양했었다.
라이브러리라고 무조건 좋지 않은 것도 아니고, 무조건 좋은 것도 아니다. 적재적소에 필요할 때 사용할 수 있어야 한다.
가스레인지를 쓰면 되는데 굳이 부싯돌로 불을 피울 필요 없기도 하다. 다양한 라이브러리를 만나면서 배울 수 있는 것도 많다. 그 코드를 뜯어보면서 학습효과를 본다던가 혹은 라이브러리 사용법을 익히면서 점점 다양하게 마주칠 라이브러리에 대한 진입장벽이 좀 낮아진다고 해야할까?

2차 프로젝트를 진행하면서 react-slick이라는 라이브러리를 활용해 캐러셀을 만들었다. 역시 유명한 만큼 편리하고 좋았지만 공식 문서를 보아도 해결되지 않는 문제들을 마주할 땐 답답하고 힘들었다. 그래도 유명한 라이브러리를 쓰면 좋은 점은 역시 사람들이 많이 사용해서 문제를 해결한 예시가 결국 존재한다는 것이다. (대체로 스택오버플로우에 있다)

* 우선 나는 react로 제작했고 Styled-Component를 사용했다는 점을 미리 알려둔다.

 

react-slick 공식문서 바로가기

Neostack

 

1. npm으로 설치하기

npm install react-slick

--save는 입력하지 않아도 된다.

 

2. import Style

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

index.js에 해당 import를 포함시켜주자.

 

3. 해당 컴포넌트 셋팅하기

// Slider는 해당 컴포넌트에서 import해주자
import Slider from 'react-slick';

const CarouselSlick = () => {
  const sliderSettings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 2,
    slidesToScroll: 2,
    autoplay: true,
    autoplaySpeed: 2500,
  };

  return (
    <Container>
      <StyledSlider {...sliderSettings}>
        {bannerImgs.map(banner => (
          <img key={banner.id} src={banner.img} alt={`banner${banner.id}`} />
        ))}
      </StyledSlider>
    </Container>
  );
};

export default CarouselSlick;

sliderSettings라는 셋팅 객체가 필요하다.
다양하게 설정할 수 있으니 이 부분은 공식문서를 살펴보는 것이 더 정확하고 효율적이다.

 

4. 내 입맛대로 커스텀하기

export const StyledSlider = styled(Slider)`
  height: 128px; //슬라이드 컨테이너 영역
  overflow: hidden;

  .slick-list {
    // 부모
    height: 100%;
    margin: 0 -10px;
    box-sizing: border-box;
  }

  .slick-slide > div {
    // 자식 안에 div
    margin: 10px;
    box-sizing: border-box;
  }

  // dots
  .slick-dots {
    left: 50%;
    bottom: -6px;
    width: auto;
    padding: 0px 12px;
    background-color: #fff;
    border-radius: 10.5px;
    z-index: 10;
    transform: translate(-50%, 0);

    li {
      width: 8px;
      height: 8px;
      margin: 0;

      &:last-of-type {
        margin-left: 6px;
      }

      button {
        width: 100%;
        height: 100%;
        padding: 0;

        &::before {
          width: 8px;
          height: 8px;
          position: static;
          top: auto;
          left: auto;
          right: auto;
        }
      }
    }
  }
`;

다소 길어져서 좋지는 않지만 아무래도 slick안에 Nesting 되어있는 요소들은 컴포넌트로 관리하는 법을 몰라서 이렇게 관리하게 되었다.
styled-component로 하나하나 관리하는 예제는 아직 발견하지 못했음 ㅠ