style

리액트에 부트스트랩(bootstrap) 사용하기

bootstrap, css, framework, ui
Views: 208

#시작하기
부트스트랩은 ui프레임워크로 손쉽데 ui디자인을 구현할수 있습니다다
React프로젝트에서 부트스트립을 사용해보도록하겠습니다.프로젝트

설치하기

npm install react-bootstrap bootstrap로 패키지를 설치 합니다.

Stylesheets

중요 - 최상단의 루트파일인 src/index.js 또는 App.js 파일에 다음 스타일을 추가해줍니다.
import 'bootstrap/dist/css/bootstrap.min.css';
만약 추가하지 않는다면 부트스트랩의 스타일은 적용되지 않습니다.

사용하기

import 하는 방법 두가지가 있습니다.

1
2
3
import Button from 'react-bootstrap/Button';
// or 
import { Button } from 'source/_posts/style/react-bootstrap';

프로젝트에서 사용하고자하는 컴포넌트를 import를 해서 적용하시면 됩니다.
예시로 버튼을 추가해 보도록 하겠습니다.

Aop.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
import { Button, ButtonToolbar } from 'react-bootstrap';

<ButtonToolbar>
    <Button variant="primary">Primary</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="success">Success</Button>
    <Button variant="warning">Warning</Button>
    <Button variant="danger">Danger</Button>
    <Button variant="info">Info</Button>
    <Button variant="light">Light</Button>
    <Button variant="dark">Dark</Button>
    <Button variant="link">Link</Button>
</ButtonToolbar>

결과물

이와같이 스타일을 추가에 들이는 시간을 단축시켜주는 프레임워크입니다.
프레임워크의 스타일이 고정되어있기에 커스터마이징을 많이 필요할시에는 css, scss, styled-components 등을 이용해서 처음부터 구현하는것이 더 효과적입니다.

Share