[React] Bootstrap의 Carousel 사용하기

Bootstrap 설치

React에서는 Bootstrap을 설치하여 컴포넌트로 사용이 가능합니다.

1. 터미널에서 아래 명령어를 통해 설치합니다.

   npm install react-bootstrap bootstrap

2. 아래와 같이 사용하려는 컴포넌트와 css을 import하여 사용합니다.
   

3. 각종 컴포넌트의 사용법은 공식 사이트에 자세히 나와 있습니다.
   >> React Bootstrap 바로가기
   

---

Carousel 사용하기

Carousel Component를 가져와서 원하는대로 스타일링 해보도록 하겠습니다.

1) Bootstrap 사이트에서 Carousel 예시 가져오기

Components 탭의 Carousels를 선택하면 다양한 예시와 코드가 나와있습니다.
저는 activeIndex로 index를 관리할 수 있는 ControlledCarousel을 이용해보도록 하겠습니다.

우선 나와있는 예시 코드를 그대로 가져와서 컴포넌트를 생성해줍니다.

• <Carousel.Item>에 이미지와 설명을 담아서 여러 번 렌더링하고 있습니다.
  -> 반복문으로 바꿔주겠습니다.
• ExampleCarouselImage는 필요없으니 빼주고 <img>를 새로 만들어줍니다.
• 저는 텍스트도 필요없어 <Carousel.Caption>도 제외했습니다.

2) 필요에 맞게 코드 수정하기

• ControlledCarousel을 사용할 컴포넌트에서 index를 관리하고 data.image를 배열로 담아 전달하여 반복문을 실행해줍니다.

3) 스타일 변경하기

개발자 모드를 켜서 확인하면 className이 지정 되어있는 것을 볼 수 있습니다.

원하는 스타일링을 위해 해당 className을 이용해 styled-components를 작성합니다.