CSS 짜기 귀찮으니 react-bootstrap으로 레이아웃을 간편하게 짜보도록 하자.
사용 전 준비
npm install react-bootstrap bootstrap 우선 터미널을 켜고 react-bootstrap 라이브러리를 install 해주고
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>index.html 파일의 <head> 태그 안에 위의 코드를 복붙해주면 된다.
이렇게 하면 부트스트랩 사용 준비는 끝이난다.
React-Bootstrap 사용법
만약 버튼이 필요하면 React-Bootstrap 사이트에서 검색해서 예제코드를 복붙하면 버튼 생성이 끝난다.
위에 Primary 버튼을 사용하고 싶으면 맨 위에 import ~~ 적어주고 버튼 태그 그대로 복붙하면 사용이 가능하다. 커스터마이징 역시 가능하다.
그런데 레이아웃을 짜다보면 부트스트랩에서 많이 사용하게 될거고 그러면 import를 하나하나 다 해줘야하는데 'import Button from ~~ ' 이거 다 적으려고 하면 코드가 길어질것이다.
import { Button, ... } from "react-bootstrap";그럴땐 이렇게 import 하고 저 중괄호 안에 사용할거 넣으면 매우 간결해진다.
성실성을 발휘해서 그냥 css를 짜는 건 어떨까요?