[react/typescript] Swiper 사용기

맨날 정해져있는 템플릿을 이용한 기능 개발만하다가 모처럼 새로운 UI를 짜야하는 일이 생겼다. 

밑밥을 깔아보자면 ㅋㅋ... 처음부터 빌드한 프로젝트가 아니라 중간에 끼여든 프로젝트였기에 코드를 읽을 때부터 버벅이긴 했다. 

자 이제 밑밥은 깔림.

 

내가 해야할 목록

1. swiper 라이브러리를 쓴다.

2. navigator 버튼을 나오게하고 첫 슬라이드에서는 왼쪽 버튼이 사라지게 마지막 슬라이드는 오른쪽 버튼이 사라지게한다.

3. 슬라이드는 마우스 드래그로도 가능하게한다.

 

 

 

 

 

Code

import React, { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';


const Projects = () => {
  const [swipe, setSwipe] = useState<any>();

  const [lastBtn, setLastBtn] = useState<boolean>(false);
  const [firstBtn, setFirstBtn] = useState<boolean>(true);
  
  return (
    <>
        <button onClick={() => swipe?.slidePrev()}>backward</button>
        <Swiper
          onBeforeInit={(swipper) => setSwipe(swipper)}
          
          // 버튼 display를 위한 부분
           onSlideChange={e => {
            e.isEnd ? setLastBtn(true) : setLastBtn(false);
            e.isBeginning ? setFirstBtn(true) : setFirstBtn(false);
          }}
        >
          {projects?.map((value: IProjectCard) => {
            return (
              <SwiperSlide key={uuidv4()}>
                <ProjectCard
                  key={uuidv4()}
                  header={value.header}
                />
              </SwiperSlide>
            );
          })}
        </Swiper>
        <button onClick={() => swipe?.slideNext()}>forward</button>
    </>
  );
};

 

위의 코드에서는 생략되었는데  lastBtn, firstBtn을 이용해서 button style에 display를 주면 된답니다! 

 

useRef를 써서 해결할 수 있다고했는데, typescript를 쓰면 타입에 대한 에러가 계속 나서 사용하지 못 함. 

그래서 찾아낸게 useState를 쓰는 것이였다, 그런데 여전히 이해가 힘들다. 라이브러리를 쓰면 100% 이해 할 필요없이 그냥 방법적인 부분만 따라가면 되는 건가 싶은데, 답답하다. setSwipe를 이해하고 싶어서 코드를 다 까보고 싶은 마음 반, 복잡함에 넣어두고 싶은 마음 반. ㅋㅋㅋㅋㅋ ... ㅎ... 그래도 작동한다는 것에 감솨

 

 

 

 

 

오랜만에 새로운 것을 도입하는거라서 스스로가 바보가 된건가? 하는 생각도 많이 들었다. 이래서 되는걸가? 라며... ㅎ...