React Swiper.js Swiper 컴포넌트 바깥에서 useSwiper()훅 사용하는 법

Swiper useSwiper()훅 useSwiper()훅은 Swiper 컴포넌트 내부에서 사용할 수 있는 훅으로, Swiper에 관련된 메서드를 제공합니다. 그런데 Swiper 컴포넌트 외부에서는 어떻게 불러올 수 있을까요? 기존 Swiper 컴포넌트 내부에서 사용하는 방법 아래 코드와 같이 버튼 컴포넌트를 하나 만듭니다. 컴포넌트 내부에 useSwiper()훅을 불러와 메서드를 사용한 다음, 버튼 컴포넌트를 Swiper 컴포넌트 내부에 불러옵니다. import { useSwiper } from "swiper/react"; export default function SlideNextButton() { const swiper = useSwiper(); return ( swiper.slideNext()}>..

• format_list_bulleted Front End/React
• · 2023. 6. 30.
• textsms

React 에서 Swiper.js를 이용하여 캐러셀 Carousel 만들기 TS JS

캐러셀(Carousel) 이란? 캐러셀은 회전목마라는 뜻인데요, 쉽게말해서 슬라이드라고 생각하시면 됩니다. 티빙, 넷플릭스 같은 곳과 핸드폰 화면에서 많이 쓰입니다. Swiper.js를 사용하는 이유? 이전까지는 Framer-motion으로 수동으로 캐러셀을 만들었습니다. 애니메이션을 넣는 것도 여간 힘든일이 아니지만, 제일 큰 이유는 Pagination을 구현하기 위함입니다 수동으로 만들 땐 Pagination 기능을 만들 순 있어도, 애니메이션을 구현하는 것은 굉장히 복잡합니다. (적어도 저는 복잡했습니다..) 슬라이드를 한 장 넘길때의 애니메이션을 구현, 두 장 넘길 때의 애니메이션 구현, … 원하는 만큼의 애니메이션을 각각 구현해야 합니다. (저의 지식에서는 이렇게 하는게 최선이라 생각이 되네요...

• format_list_bulleted Front End/React
• · 2023. 6. 23.
• textsms