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

안녕하세요 jju_developer입니다.

 

오늘은 react-bootstrap!! 에 대해서 알아보겠습니다.

📌 react-bootstrap 이란

• react 에서 Bootstrap5를 사용 가능하도록 개발한 라이브러리입니다.
• 각종 레이아웃, 버튼, 입력창, 테이블 등을 미리 디자인을 정의해 두어 React에서 컴포넌트를 불러 사용가능합니다.  
• 프로젝트 내 따로 bootstrap.js 파일을 둘 필요가 없고 react-bootstrap 라이브러리만 설치하여 사용 가능합니다. 

 

📌 reactstrap 사용법

• react Bootstrap 문서에서 참고해 npm에서 react-bootstrap 라이브러리를 설치합니다.
• npm install 은 yarn add 와 동일하기 때문에, yarn은 yarn add react-bootstrap bootstrap으로 설치하시면 됩니다. 
(npm install react-bootstrap bootstrap)

 

1. cmd창에 명령어 차례 대로 입력하기
npm install --save reactstrap
npm install --save bootstarp     // reactstrap은 bootstrap을 포함하지 않고 있어서 따로 설치해줘야 함.
 
2. App.js 상단에 bootstrap CSS import 해주기
import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';

 

예시)

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

• 부트스트랩 컴포넌트를 import 할때는 두 가지 방법을 사용합니다. 둘 중 하나 사용!
(버튼, 입력창, 리스트, 테이블 등을 부트스트랩 컴포넌트라고 할게요) 
import Button from 'react-bootstrap/Button'; //1번 
import { Button } from 'react-bootstrap'; //2번

3. 원하는 기능을 선택하여 적용하면 됩니다.

1) alerts

2) badge

3) breadcrumgs

4) button-dropdown

5) button-group

6) buttons

7) card

 

📌 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을 호출해 부트스트랩의 각각의 버튼 스타일을 확인해 보세요. 

 

 

아래에 참고하기 좋은 리액트 스트랩 참고 링크 걸어두겠습니다.

 

 

[리액트 React] 실무에서 유용하게 사용되는 실무에서 유용하게 사용되는 reactstrap Carousel (슬라이

 

 

[리액트 React] 실무에서 유용하게 사용되는 reactstrap Button Group

 

[React Bootstarp] 리액트부트스트랩 시작하기

 

 

오늘도 수고하셨습니다.😊