React(97) Slick 슬라이더와 커스텀 탭 연동하기 (Feat. afterChange)

slick 을 이용하여 슬라이더를 만들어보았다.

커스텀 탭을 추가하여 배너 움직임에 따라 탭도 자동으로 움직이도록 해보자

 

 

다음처럼 화면에 한장씩 보이는 싱글 슬라이더가 있다. 슬라이더 아래에는 커스텀 탭이 위치한다.

탭을 클릭하면 해당 슬라이더로 이동한다.  또한 [ < ] [ > ] 버튼으로 슬라이더를 이동하면 탭이 선택된다.

부디 이해가 쉽길 바라며

---

 

React(97) Slick 에 커스텀 탭 사용하기

 

코드를 짜기 전에 내손에 쥐어진 무기가 뭐가 있는지 살펴보자 👊(현실은 맨주먹)

slick 컴포넌트의 내장 Setting 기능 중 바로 요 기능을 이용해볼 것이다. 

afterChage 너로 정했다 가랏!

 

BannerSlider.tsx

우선 Tab 과 ImageSlider 컴포넌트를 임포트 해주자

import Slider, { Settings } from 'react-slick';
import Tabs from 'components/common/Tab';

 

 

슬라이더의 Item props 으로 들어갈 객체의 타입을 지정해주었다. 이 객체 안에는 { id, tabTitle, onClick } 함수가 들어있다.

interface Banner {
  id?: string;
  tabTitle?: string; // 요부분 사용할거다 탭에 
  onClick?: (id?: string) => void;
}

interface BannerSliderProps { // 슬라이더에 보여줄 items 객체를 props 로 받아와 사용하자
  items: Banner[];
}

 

 

props 로 받은 items 에서 타이틀만 뽑이주고

setTab 함수로 어느 탭이 선택되었는지 정해준다

onSlideChange 라는 함수로 현재 화면에 나오는 슬라이드 인덱스를 받아 탭에 알려준다.

그리고 slider 컴포넌트에서 afterChange 필드에 담아 보내주자

  const { items } = props; // 구조분해할당을 통해 items 를 꺼내어 사용하자
  const [tabIndex, setTabIndex] = useState<number>(0); // 탭 인덱스
  
  // 셔플로 인해 랜덤으로 오는 아이템들의 탭 타이틀 추가
  const tabItems: string[] = useMemo(() => {
    const tab: string[] = [];

    items.map(banner => {
      if (!banner.tabTitle || banner.tabTitle === '') return;
      tab.push(banner.tabTitle);
    });

    return tab;
  }, [items]);
  
  // 클릭시 탭 인덱스가 세팅
  const setTab = (index: number) => {
    setTabActiveIndex(index);
  };
   
  // 현재 슬라이더 아이템을 감지한 뒤, tab 한테도 알려준다
  const onSlideChange = (curr: number) => {
    for (let j = 0; j < tabItems.length; j++) {
      if (curr === j) {
        setTabActiveIndex(curr);
        return;
      }
    }
  };

  // 슬릭 슬라이더 세팅
  const setting = {
    autoplay: true,
    autoplaySpeed: 3500,
    afterChange: currentItem => onSlideChange(currentItem), // 현재 슬라이더를 알수있다.
  }

 

 

 

슬라이더 컴포넌트와 탭 컴포넌트가 보인다.

위에서 셋업한 대로 sliderSetting  을 넣어주면... ? 슬라이더 정보를 탭과 연결시켜주었다 :) 

// 슬라이더
<Slider
  {...sliderSetting}
  width={isMobile ? '100%' : '1280px'}
  overflow="visible"
>
  {slideItem}
</lider>

// 탭
<Tabs
  items={tabItems}
  tabIndex={tabIndex}
  setTabIndex={setTab}
/>