bootstrap 연동하기

# intro

난 부트스트랩을 엄청 많이 쓰니까 이것도 포스팅한다

vue랑 조금 다르다.

나중에 base만들때 쓰면 좋을듯.

 

 

# 부트스트랩 먼저 들어가줌

Introduction | React Bootstrap

 

# 부트스트랩 모듈 설치 

npm install react-bootstrap bootstrap

 

 

# index.html head태그안에 스크립트 복붙

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
  crossorigin="anonymous"
/>

 

# app.js에 해당 컴포넌트 import

 

Buttons | React Bootstrap

해당 컴포넌트 bootstrap사이트 들어가면 컴포넌트 import하는거 있다. 복붙해서 가져오면 됨.

vue는 그냥 버튼에 태그이름만 적당히 해주면 적용됐는데 react에서는 좀 다르다.

import Button from 'react-bootstrap/Button';

이렇게 원하는 컴포넌트는 임포트를 해줘야한다.

조금 불편한듯

 

 

 

# 테스트 

import './App.css';
import Button from 'react-bootstrap/Button';

function App() {
  return (
    <div className="App">
      hello react
      <Button variant="primary">Primary</Button>
    </div>
  );
}

export default App;

잘 적용된걸 볼 수 있다.

 

 

 

 

# 추가적으로

import Button from 'react-bootstrap/Button';

버튼만 쓰는게 아니니까

import {Button, Navbar, Container} from 'react-bootstrap/Button';

이런식으로 여러개 임포트해올때 객체로 넣으면된다.

 

 

 

# 추가적으로2

react 부트스트랩 코드는 좀 더럽다

그냥 원조 부트스트랩 가져와서 써도된다.

근데 원조쓰면 용량이 더 커서 트래픽이 좀 높다고함..