Team project - 왓챠 (1)

박주엽·2020년 8월 22일
0

React

목록 보기
2/7


이번 1차 프로젝트로 왓챠피디아 홈페이지를 선택했다.

메인 페이지의 중복되는 레이아웃을 component 단위로 나누고 React 라이브러리인 slick을 사용하여 슬라이드를 구현하였다. 또한 내가 직접 버튼을 커스텀 하였다 처음에는 적용하는 방법을 찾느라 시간이 좀 걸렸지만 결국 원하는 결과가 나와 기쁘다. 지금까지 내가 중점적으로 생각한 내용을 정리하겠습니다.

1.React-slick에 커스텀 버튼 적용하기

react-slick을 적용하는 방법은 따로 포스팅하고 이번에는 내가 직접 커스텀한 버튼을 적용하는 방법을 알아보겠습니다.

  1. 커스텀할 버튼 component 생성 후 스타일링

  2. 커스텀 버튼 적용할 컴포넌트에 Import

  3. settings에 component 추가

settings = {
      dots: false,
      infinite: false,
      prevArrow: (
        <SliderBtn/>
      ),
      nextArrow: (
        <SliderBtn/>
      ),
      speed: 500,
      slidesToShow: this.state.slidesUnit,
      slidesToScroll: this.state.slidesUnit,
      initialSlide: 0,
      responsive: [
        {
          breakpoint: 1100,
          settings: {
            slidesToShow: 4,
            slidesToScroll: 4,
          },
        },
        {
          breakpoint: 760,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
          },
        },
      ],
    };
  1. position 적용

이때 버튼을 클릭 했을 때 슬라이딩 효과는 커스텀 버튼 component의 버튼에 onClick={this.props.onClick} 이벤트를 주면 slick 라이브러리에 내장된 onClick 함수로 인해 버튼을 눌렀을때 슬라이딩되는 효과가 적용된다.

2.조건에 따라 버튼 display:none 적용하기

prevBtn은 next쪽으로 슬라이딩 할 대상이 없으면 display되고
nextBtn은 prev쪽으로 슬라이딩할 대상이 없으면 display 된다.

로직은

버튼 컴포넌트

0개의 댓글