react 에서 bootstrap 사용하기

react에서 bootstrap을 사용하기 위해 우선 bootstrap 패키지를 설치 해줘야 합니다.

-npm을 사용하는 경우 아래와 같이
npm install react-bootstrap bootstrap
-yarn을 사용하는 경우 아래와 같이
yarn add react-bootstrap bootstrap

command창에서 입력 해주시면 자동으로 bootstrap패키지라 추가 됩니다.
그뒤 컴퍼넌트 호출을 위해 app.js파일에 bootstrap관련 내용을 import해줍니다.

import 'bootstrap/dist/css/bootstrap.min.css';
import * as ReactBootstrap from "react-bootstrap";

 

bootstrap.min.css import부분은 index.html에서 CDN방식으로 link태그를 추가 할 수 도 있습니다.

https://react-bootstrap.github.io/

React-Bootstrap

import css를 하게 되면 nodemodule 하위에 설치한 bootstrap 파일이 빌드시 같이 빌드 됩니다.

index.html을 수정한 경우 실행 시 마다 최신 정보를 요청하고 적용 합니다.

import * as ReactBootstrap 이 부분의 경우 컴포넌트를 동적으로 호출 하기 위한 설정으로

<ReactBootstrap.Button>Boot strap</ReactBootstrap.Button> 와 같이 사용 하시면 됩니다.
이 밖에 단건으로 

import { COMPONENT_NAME } from 'react-bootstrap';
이렇게 호출 도 가능 하고 
import React, { Component } from "react";
import { Form, Col, Button } from "react-bootstrap";
그룹으로 묶어서 추가도 가능 합니다.

자세한 내용은 아래의 url에서 확인 가능 합니다.

 

https://www.pluralsight.com/guides/how-to-import-components-from-react-bootstrap

How to Import Components from React Bootstrap | Pluralsight