/ REACT

React에서 Bootstrap 사용하기

React은 다음과 같이 구성되어 있습니다.




오늘은 React에서 Bootstrap을 사용하는 방법에 대해서 정리해보겠습니다.

설치하기

npm install react-bootstrap bootstrap

react 프로젝트에서 터미널에 위와 같이 부트스트랩을 설치해줍니다. 추가로 일부 스타일이 부트스트랩 CSS 파일을 요구하는 경우가 있으므로 다음 코드를 복사하여 React프로젝트의 index.html파일에 붙여넣어줍니다.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
  integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
  crossorigin="anonymous"
/>

준비 끝!

참고 : https://react-bootstrap.github.io/getting-started/introduction

사용하기

import Button from 'react-bootstrap/Button';

function App() {
  return (
    <>
      <Button variant="success">Success</Button>{' '}
    </>
  );
}

export default App;

예시로 공식사이트에서 버튼을 하나 가져와 복사해봤습니다. 그리고 상단에 ‘Button’을 꼭 import 해주어야 정상적으로 사용할 수 있습니다.

가져온 스타일은 따로 커스터마이징이 가능합니다.
하나하나 처음부터 UI를 개발할 수 있지만 기본적인 스타일을 그대로 가져온 후 커스터마이징하면 개발시간을 단축할 수 있습니다.




End.