react bootstrap 사용하기

https://react-bootstrap.github.io/components/carousel/ 을 사용하여
배너를 만들어 볼 것이다.

부트스트랩을 사용하려면 터미널에
yarn add react-bootstrap bootstrap를 설치해줘야한다.
설치 후 사용 할때는 import 'bootstrap/dist/css/bootstrap.css';를
해줘야한다.

완성 코드

import React from "react";
import { Carousel } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function BannerUI() {
  return (
    <Carousel fade>
      <Carousel.Item>
        <img
          style={{ height: "400px" }}
          className="d-block w-100"
          src="img/banner01.png"
          alt="First slide"
        />
      </Carousel.Item>
      <Carousel.Item>
        <img
          style={{ height: "400px" }}
          className="d-block w-100"
          src="img/banner02.png"
          alt="Second slide"
        />
      </Carousel.Item>
    </Carousel>
  );
}

결과물

귀여운 배너가 완성되었다!