[React] 화면 슬라이스 구현 carousel

React에서 화면 슬라이드 라이브러리 사용하기

한국어로는 화면이 넘어가는 디자인을 슬라이드라고 많이 표현하는데 영어로 검색해서 찾으려면 carousel이라고 검색해야한다.

빙빙 돌아가는 회전목마처럼 돌아가는 캐로셀

 

 

프로젝트를 진행하는 '도중' 슬라이드를 도입해야 해서 찾다가 가장 편하게 사용할 수 있을 것 같아서 처음에는 bootstrap carousel을 사용하려고 import했다

https://react-bootstrap.github.io/components/carousel/

React-Bootstrap

bootstrap을 적용하면 어렵지 않게 사용할 수 있지만 프로젝트가 이미 많이 진행된 상태에서 부트스트랩을 까니깐

CSS충돌이 나서 화면이 다 깨져버렸다.

부트스트랩을 일부 컴포넌트에서만 쓸 수 없나 하고 찾아봤는데 방법이 없어서ㅠㅠ 슬라이드 다 구현해놓고 다시 다 돌려놔야했다ㅠㅠ

 

물론 방법이 있긴 있다.

하나하나 찾아면서 수정하기...

 

bootstrap은 프로젝트 시작하는 시기에 사용할지 확실히 정해두는게 좋다고 한다.

 

두번째로 도입하려고 한 라이브러리는

https://www.npmjs.com/package/react-responsive-carousel

react-responsive-carousel

 

npm i react-responsive-carousel

component에는 아래를 import 해준다

import 'react-responsive-carousel/lib/styles/carousel.min.css';
import { Carousel } from 'react-responsive-carousel';

 

<Carousel
        showArrows={false}
        showStatus={false}
        showIndicators={false}
    >
    {myMenu && myMenu.map(item => <MyMenuCard item={item} />)}
</Carousel>

<Carousel /> 내부에 prop로 속성 3가지를 연결해줬다

1. 화살표 숨기기

2. 아래 이미지의 상단의 1 of 6 숨기기

3. 아래 이미지 하단의 하얀 점 숨기기

그리고 내부 아이템들은 map((item) => <MyMenuCard item={item}>) 반복문을 사용해서 갯수만큼 MyMenuCard 컴포넌트를 불러온다!

 

 

 

 

https://alvarotrigo.com/blog/react-carousels/

14 Top React Carousel Components [2022]

여기 이쁜 라이브러리 많은데 버전 안맞아서 설치 안되는 라이브러리도 많다ㅠ