[React] Swiper Tab 클릭 시 슬라이드 처음으로 이동하기

[React, TypeScript]

Swiper를 이용하여 이미지 슬라이더를 구현하였다.

map 을 사용하여 반복되는 코드를 축약하였고,

Tab 을 클릭하면 useState를 통해 값이 바뀌며 해당 이미지 슬라이더들이 바뀌도록 하였다.

 

그러던 중 Tab을 클릭시 그 전 Tab의 위치에서 이미지슬라이더의 이미지만 바뀌는 오류를 발견하였다.

Tab을 클릭했을 때 이미지 슬라이더를 다시 처음 슬라이더로 세팅하고 싶었다.

 

Swiper 에 있는 API를 활용하여 이를 해결할 수 있었다.

해결 방법은 다음과 같다.

 

1. import 

import SwiperCore from 'swiper';

 

2. Swiper 라이브러리의 컴포넌트에 onSwiper props에 해당 함수를 넣는다.(setState) 

공식문서에서 찾아 설명과 주석을 참고해서 읽어보면 swiper가 initialization 되자마자 사라지는 부분으로 swiper instance를 받는 callback 함수이다. 난 swiper instance가 필요했는데!! 심지어 initialize 시점에 딱 한번만 호출되서 두세번 불려올까봐 걱정할 필요도 없는 아주 좋은 props.method가 바로 나타났다. 🍀 .. 일단 내 아이디어는 간단했다. 1. 카테고리가 바뀔 때마다 slideTo를 호출해준다. 2. 사용할 swiper instance를 어디선가 받아온다. 3. 거기에 있는 slideTo를 꺼내쓴다. 결국 핵심은 instance를 받아오는 방법을 찾는 것! 처음엔 onSlideChange를 활용해볼려고 했는데 이건 슬라이드가 바뀌는 이벤트를 감지한다. 슬라이드를 변경 시 외부에 있는 카테고리 변경은 가능하지만 외부에 있는 카테고리 변경 시 슬라이드 변경은 불가능하다는 의미다. https://velog.io/@moonelysian/Swiperjs-%EC%82%AC%EC%9A%A9-%EC%8B%9C-%EC%99%B8%EB%B6%80%EC%97%90%EC%84%9C-Swiper-control-%ED%95%98%EB%8A%94-%EB%B2%95

 

3. 함수를 작성한다.

아래 사진에서 handleClickTab은 Tab클릭시 실행되는 함수이며,

//Tab Click시 처음 슬라이드로 이동

  const [swiper, setSwiper] = useState<SwiperCore>();

if (swiper) {

      swiper.slideTo(0, 1000);

    }

위 코드가 swiper의 슬라이드를 처음으로 이동시켜준다.

'slideTo(슬라이드인덱스-0으로이동 , 1000 시간)'

위 실행 함수 코드

 

 

https://swiperjs.com/react

Swiper React Components

 

https://velog.io/@moonelysian/Swiperjs-%EC%82%AC%EC%9A%A9-%EC%8B%9C-%EC%99%B8%EB%B6%80%EC%97%90%EC%84%9C-Swiper-control-%ED%95%98%EB%8A%94-%EB%B2%95

Swiperjs 사용 시 외부에서 Swiper control 하는 법