[TIL]11.2 react-bootstrap

오늘한일

프론트 디렉토리 구조를 대략적으로 만들어 보았다.

기본적인 Route를 걸어주고 UI 라이브러리로 무엇을 사용할지 고민했다. 사용해본 경험이 있는 엔트 디자인을 써볼까 했는데 엔트 디자인은 나의 css실력이 부족해서 인지 기본 디자인에서 변경을 하기가 어렵고 뭔가 유연하지 못하다는 느낌을 많이 받았다.

 

머테리얼UI, 시멘틱UI 등을 고민하다가 bootstrap을 사용해 보기로 하였다. bootstrap을 적용하면 자동으로 반응형 웹으로 구현이 되었다. 그리고 reactstrap이라는 라이브러리가 있는데 Bootstrap 컴포넌트별로 React 컴포넌트가 구현되어 더욱 React스러운 개발이 가능하다고 한다.

 

reactstrap 설치/기본 설정

 

설치 방법

npm install --save bootstrap reactstrap

부트스트랩까지 다운로드 받는 이유는 리액트스트랩이 부트스트랩의 css 파일을 포함하고 있지 않기 때문이다.

 

기본 설정

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

index.js 파일에 bootstrap을 불러오기만 하면 끝이 난다.

 

bootstrap 요소 불러오기

import { Button } from 'reactstrap';`

위와 같이 필요한 요소들을 불러와서 사용하면 된다.

reactstrap component : https://reactstrap.github.io/components/buttons/