[React] 리액트 부트스트랩(react-bootstrap) 적용하기

📌 react-bootstrap 이란? 

• react 에서 Bootstrap5 을 사용 가능하도록 개발한 라이브러리입니다.

• 각종 레이아웃, 버튼, 입력창, 테이블 등을 미리 디자인을 정의해두어 React에서 컴포넌트를 불러 사용가능합니다.  

• 프로젝트 내 따로 bootstrap.js 파일을 둘 필요가 없고 react-bootstrap 라이브러리만 설치하여 사용 가능합니다. 

 

📌 Bootstrap 라이브러리 설치하기 

• react Bootstrap 문서에서 참고해 npm에서 react-bootstrap 라이브러리를 설치합니다.

• npm install 은 yarn add 와 동일하기 때문에, yarn은 yarn add react-bootstrap bootstrap 으로 설치하시면 됩니다. 

npm install react-bootstrap bootstrap

 

📌 Bootstrap import 

•먼저 App.js 또는 index.js 에 bootstrap 라이브러리를 import합니다.

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

 

• 부트스트랩 컴포넌트를 import 할때는 두가지 방법을 사용합니다. 마음에 드는 방법을 사용하시면 돼요. 
(버튼, 입력창, 리스트, 테이블 등을 부트스트랩 컴포넌트라고 할게요) 

import Button from 'react-bootstrap/Button'; //1번 
import { Button } from 'react-bootstrap'; //2번

 

📌 Bootstrap 적용하기

• Bootstrap 버튼 만들기 

Bootstrap 버튼 타입을 적용하기 위해서는 variant 속성을 사용하면 됩니다 :) 

variant : Primary, Secondary, Success, Warning, Danger, Info, Light, Dark, Link

 

import React from "react";
import Button from 'react-bootstrap/Button';
function Button(){
    return (
        <div>
            <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>
        </div>
    );
}

export default Button;

- 결과 

이제 콘솔에서 npm start 를 입력한 후, localhost:3000 을 호출해 부트스트랩의 각각의 버튼 스타일을 확인해보세요. 

 

• Bootstrap 테이블 만들기 

bootstrap 문서를 참고해 bootstrap 테이블을 적용해보겠습니다 :D

import React from "react";
import Table from 'react-bootstrap/Table';
function List(){

    return (
    <Table striped bordered hover>
        <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        </tbody>
    </Table>);
}

export default  List;

- 결과

localhost:3000 에서 아래와 같은 테이블 형태를 확인해보세요 :D