[React] React Bootstrap 사용 방법

Bootstrap은 레이아웃, 폼, 버튼, 모달 등을 제공하여 웹 사이트 개발을 보다 쉽게 할 수 있도록 도와주는 CSS, JS 프레임워크이다. 해당 포스터에서는 리액트 용 react-bootstrap을 사용 해보자!

아래 사이트에서 로그인 없이 무료로 사용이 가능하며, 단순히 코드를 복사 붙여넣기 하여 편하게 사용할 수 있다!

---

React Bootstrap | React Bootstrap

 

 

사용해 보기

 

제공되는 기능도 많고 결과 화면도 미리 보여줘서 골라 사용하기 편하다!

홈페이지 상단 'Components' 탭을 클릭하면 여러 컴포넌트를 볼 수 있다. 예제로 Alert을 사용 해보자!

 

 

React Bootstrap 설치 및 코드 붙여넣기

npm install react-bootstrap bootstrap

import React from 'react';
import Alert from 'react-bootstrap/Alert';

function Bootstrap(props) {
  return (
    <Alert variant="success">
      <Alert.Heading>Hey, nice to see you</Alert.Heading>
      <p>
        Aww yeah, you successfully read this important alert message. This
        example text is going to run a bit longer so that you can see how
        spacing within an alert works with this kind of content.
      </p>
      <hr />
      <p className="mb-0">
        Whenever you need to, be sure to use margin utilities to keep things
        nice and tidy.
      </p>
    </Alert>
  );
}

export default Bootstrap;

 

컴포넌트명만 제외하고 그대로 복사한 코드를 사용할 컴포넌트에 붙여넣고 실행해보자. import도 빼먹지 말자!

 

 

실행 화면이 아까 미리 보여준 화면과 다르다..

프로젝트에 Bootstrap CSS 파일을 포함시켜 주지 않아서 생기는 문제이다.

index.js 또는 app.js에 아래 코드를 추가하고 다시 실행해보자!

import 'bootstrap/dist/css/bootstrap.min.css';

 

src/index.js

 

 

차쟌! CSS가 정상적으로 적용되었다!

 

 

---

 

 

Bootstrap을 사용하면 레이아웃, 테이블 등등 따로 시간들이지 않고 디자인, 반응형 구현이 가능하니 잘 사용하면 아주 유용할 것 같다!