이번 1차 프로젝트로 왓챠피디아 홈페이지를 선택했다.
메인 페이지의 중복되는 레이아웃을 component 단위로 나누고 React 라이브러리인 slick을 사용하여 슬라이드를 구현하였다. 또한 내가 직접 버튼을 커스텀 하였다 처음에는 적용하는 방법을 찾느라 시간이 좀 걸렸지만 결국 원하는 결과가 나와 기쁘다. 지금까지 내가 중점적으로 생각한 내용을 정리하겠습니다.
react-slick을 적용하는 방법은 따로 포스팅하고 이번에는 내가 직접 커스텀한 버튼을 적용하는 방법을 알아보겠습니다.
커스텀할 버튼 component 생성 후 스타일링
커스텀 버튼 적용할 컴포넌트에 Import
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,
},
},
],
};
이때 버튼을 클릭 했을 때 슬라이딩 효과는 커스텀 버튼 component의 버튼에 onClick={this.props.onClick}
이벤트를 주면 slick 라이브러리에 내장된 onClick 함수로 인해 버튼을 눌렀을때 슬라이딩되는 효과가 적용된다.
prevBtn은 next쪽으로 슬라이딩 할 대상이 없으면 display되고
nextBtn은 prev쪽으로 슬라이딩할 대상이 없으면 display 된다.
로직은
버튼 컴포넌트