[Bootstrap] 간단한 사용 방법(React)

오늘은 부트스트랩에 대하여 포스팅 해보겠습니다
부트스트랩은 css 및 html(버튼,메뉴,레이아웃) 등을 디자인적으로 생성할 수 있도록 보조해주는 라이브러리 입니다.

1) React-Bootstrap 설치
Bootstrap이 원조 , React에 맞게 변형한 라이브러리입니다.
https://react-bootstrap.github.io/

React Bootstrap | React Bootstrap

[Get Started] 버튼을 클릭하고 , Installation 항목에서 
npm install react-bootstrap bootstrap 명령어를 VSCode 터미널에 입력합니다.
이 명령어는 수시로 변경된다고 하니 , 해당 사이트에 접속하셔서 최신 명령어를 확인하는것이 좋겠습니다 ~

2) CSS파일 Import
Installation 항목 밑으로 가보면 CSS 라는 항목이 있는데 거기서 아래 부분을 복사하여 App.js 상단에 Import 하는 부분에 붙여넣어줍니다.

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

3) CSS 생성
react-bootstrap 페이지 우측 상단에 Search 부분에서 원하는 항목을 검색하여 html코드를 복사하면 완성입니다.
<Button variant="primary">Primary</Button>
ex) 버튼을 생성하고자 하면 위와 같은 코드를 복사하여 jsx내에 생성하면 됩니다.
Button은 Component기 때문에 아래와 같이 import 중괄호 안에 사용하고자 하는 Component 명들을
작성하셔야 적용됩니다.

import { Button,Navbar,Container,Nav,Row,Col } from 'react-bootstrap';

감사합니다 !