리액트 부트스트랩 사용법

리액트에서 부트스트랩을 사용해보고 싶으면

npm install react-bootstrap bootstrap

이걸 해서 다운 받고

사용하려는 리액트 파일에 들어가셔서

import { Button } from 'react-bootstrap';

이렇게 import를 해주면 된다.

그런 다음에

index.html 파일 같은 링크를 담을 수 있는 곳에

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css"
  integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7"
  crossorigin="anonymous"
/>

이걸 붙여넣어주면 된다.

그런 후에 실제 코드에서 어떻게 사용하면 되냐면,

버튼태그

보통 버튼을 사용하려면

<button></button>

이렇게 태그를 써서 사용하는데,
부트스트랩의 버튼을 사용하고 싶으면 대문자를 사용하면 된다.

<Button></Button>

저렇게 설정해서 사용해보면 부트스트랩의 기본 값으로
파란색의 버튼이 하나 생성이 될텐데,

 <Button variant="success">추가</Button>

이런 식으로 값을 넣어주면, 해당하는 양식대로 버튼을 보여줄 수 있게 된다.

저렇게 success로 하면 버튼이 초록색으로 바뀐다.
primary : 파란색
warning : 노란색

input태그

<input>

이것도 기존 input은 저것인데,
부트스트랩에서는 input을 Form.Control라고 한다.
그래서

 <Form.Control
          size="lg"
          type="text"
          placeholder="할 일 입력"
          style={{ marginRight: "10px", writingMode: "horizontal-tb" }}
        ></Form.Control>

이런식으로 적어두면, 내가 원하는 값을 가지고 스타일을 쉽게 꾸밀 수 있게 된다.