[React] Bootstrap/Reactstrap 설치

CSS 작업을 도와주는 React-Bootstrap

 

React에서는 CSS 작업을 원활하게 도와주는 라이브러리가 존재하는데 이가 Bootstrap이다

Bootstrap은 상태값과 클래스를 사용하고, React-Bootstrap은 function과 hooks를 사용한다

 

[라이브러리 다운]

// (1)
npm install --save reactstrap
npm install --save bootstrap

//(2)
npm install react-bootstrap bootstrap

(1) bootstap는 css를 적용하기 위한 라이브러리로 reactstrap을 설치해 컴포넌트에서 import하여 각 기능 사용이 가능

 

(2) react-bootstrap의 경우에는 css 적용과 동시에 컴포넌트에서 import를 하여 각 기능 사용이 가능함

 

 

import 'bootstrap/dist/css/bootstrap.min.css'; // (1)

import {Button} from 'reactstrap'; // (2)
import Button from 'react-bootstrap/Button'; // (3)

(1) import를 통해 css 적용이 가능

(2) react-bootstrap이 아닌 bootstrap을 설치한 경우 reactstrap을 사용하기 위한 import

(3) react-bootstrap을 사용한 경우 import

 

---

아래 사이트를 참고하시길 바라며,

예제는 다음 글들을 참고해주세요:)

[React-bootstrap]

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

React Bootstrap | React Bootstrap

 

 

[Reactstrap]

https://reactstrap.github.io/?path=/docs/home-installation--page

Storybook