react swiper 실행해서 이미지 슬라이드 만들기

🧐 라이브러리? 직접구현?

슬라이드를 직접 만들어보는 것과 라이브러리를 이용하는 두가지 방법을 고민하다 라이브러리를 사용하여 해보는 방법을 선택하게 되었다.

직접 만들법도 하지만 라이브러리를 활용하여 적용하게 되면 좀 더 다양한 슬라이더 효과를 활용할 수 있을 생각에 라이브러리를 선택하게 되었다.
하지만 라이브러리를 택한 방법 또한 쉽지 않은 방법 이였다.

시작

시작하는 방법 get started 를 눌러 필요한 설치를 해야한다.

그리고 demos에서 필요한 스타일을 찾아 적용해보면된다

내가 선택한 스타일찾고 원하는 라이브러리를 선택하여 하면 된다 하지만 여기서 문제가 발생했다.
라이브러리를 설명대로 하였지만 값이 제대로 설정이 되지 않아 계속 오류가 발생하는 것이였다.

관련 코드

import React, { useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";

import "./styles.css";

// import required modules
import { FreeMode, Navigation, Thumbs } from "swiper";

export default function App() {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);

  return (
    <>
      <Swiper
        style={{
          "--swiper-navigation-color": "#fff",
          "--swiper-pagination-color": "#fff",
        }}
        loop={true}
        spaceBetween={10}
        navigation={true}
        thumbs={{ swiper: thumbsSwiper }}
        modules={[FreeMode, Navigation, Thumbs]}
        className="mySwiper2"
      >
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-6.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-7.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-8.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-9.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-10.jpg" />
        </SwiperSlide>
      </Swiper>
      <Swiper
        onSwiper={setThumbsSwiper}
        loop={true}
        spaceBetween={10}
        slidesPerView={4}
        freeMode={true}
        watchSlidesProgress={true}
        modules={[FreeMode, Navigation, Thumbs]}
        className="mySwiper"
      >
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-6.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-7.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-8.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-9.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-10.jpg" />
        </SwiperSlide>
      </Swiper>
    </>
  );
}

원하는 식이 있어 이 식을 바로 붙여서 사용하면 될 것이라고 생각했다. 그래서 라이브러리를 사용하는 방식이 너무 쉬울 것이라고 생각하고 안일하게 생각을 했다.
하지만 오류가 나고 그것으로 그동안 작성해논 것까지 하나게 보이지 않는 상황이 발생하게 되었다.

오류가 난 부분은 바로

<Swiper
        style={{
          "--swiper-navigation-color": "#fff",
          "--swiper-pagination-color": "#fff",
        }}
        loop={true}
        spaceBetween={10}
        navigation={true}
        thumbs={{ swiper: thumbsSwiper }}
        modules={[FreeMode, Navigation, Thumbs]}
        className="mySwiper2"
      >

여기서 thumbs={{ swiper: thumbsSwiper }} 부분이 잘못 되었던 것이다.

💀 오류코드

Uncaught TypeError: Cannot convert undefined or null to object

💫 해결방법

thumbs={{swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null}}

🤔 결론

라이브러리를 사용하면서 오류코드가 나면 몇번이고 지우면서 다시 처음부터 작성하면서 그 반복을 계속하게 되었다 시간이 지체된 것 같다 그리고 오류를 자세하게 하나하나 뜯어볼 생각만 하지않고 잘된 케이스만 찾아보면서 다시 새로시작하면 되지 라고 생각하면서 계속 그 상태를 반복하게 된것 같다 .
코드에 오류가 생기면 도망가지말고 그 오류에 대해 깊이 생각해볼 것을 다시한번 깨닫게 되는 계기가 되었다.

👀 reference

https://swiperjs.com/demos
https://stackoverflow.com/questions/73046820/swiper-react-cannot-convert-undefined-or-null-to-object