React, Bootstrap 사용

React-Bootstrap 라이브러리

Bootstrap 은웹사이트 구축 프레임 워크. 조금 더 편하게 반응형 웹 구현을 도와줌

또한 디자인을 편하면서도 예브게 할 수 있도록 편의성을 제공

React-Bootstrap은 Bootstrap을 React에 맞게 변형한 것

 

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

React-Bootstrap

웹페이지에 들어가 get started를 하면 설치하는 법이 설명되어 있음

 

React-Bootstrap 설치

1. 터미널로 React-Bootstrap 설치

터미널을 열고

 

npm install react-bootstrap bootstrap

 

입력하면 됨(명령어는 자주 바뀌니 홈페이지를 확인해볼 것)

 

2. Bootstrap CSS파일을 요구하는 스타일이 경우

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

 

을 하거나

 

import 'bootstrap/dist/css/bootstrap.min.css';

 

을 하면 됨

 

React-Bootstrap 사용법

필요한 부분에 맞게 원하는 것을 사이트에 검색하여 이용

 

만약 검은 바탕에 흰색 글씨로 된 버튼이 필요하면

예시로 웹사이트에 자신이 원하는 버튼을 찾은 다음 복사 그리고 자신의 코드에 붙여넣기

 

import { Button } from "bootstrap";

function App() {
  return (
    <div className="App">
      <Button variant="dark">Dark</Button>
    </div>
  );
}

 

다만 대문자로 시작하는 컴포넌트 이름은 상단에 import 해와야 함

 

- className을 부여하여 CSS 커스터마이징해서 자신이 원하는대로 변경할 수 있음!!