bootstrap - react bootstrap button 리액트 부트스트랩 버튼

react 에서 부트스트랩을 사용하는 방법

---

일반 부트스트랩 사용법과 react에서 부트스트랩을 사용하는 방법은 조금 다르다.

 

react는 우선 npm으로 부트스트랩을 설치 해주어야 한다.

 

npm install react-bootstrap bootstrap

 

설치 후 리액트 프로젝의 index.js 에서 부트스트랩 css를 import 해주어야한다.

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css' ;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

그리고 예를들어 버튼을 사용하고 싶으면 버튼을 import 해주어야한다.

 

이 부분이 기존 html에서 사용하는 부트스트랩이랑은 좀 다르다. 

 

import 해주는게 아주 비효율적인것같다.

 

import { Button } from 'react-bootstrap';

function App() {
  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 App;

 

이렇게 하면 버튼 완성이다.