[React] Bootstrap 프레임워크를 React에서 사용하기: React-bootstrap

Bootstrap

웹사이트를 제작한다면 HTML, CSS, JavaScript를 사용하여 밑바닥부터 제작할 수도 있겠지만, 기획 및 디자인 단계를 간소화하고 기존의 웹페이지 틀에서 일부분만 조금씩 변형하여 편하고 빠르게 제작하고 싶을수도 있을 것입니다. 이럴 때 사용할 수 있는 프레임워크가 바로 Bootstrap입니다. 

Bootstrap

 

 

React-Bootstrap

그러나 React 프로젝트 내에서 Bootstrap을 사용해야 한다면, Bootstrap의 구성요소들이 React 컴포넌트로 변환된 React-Bootstrap을 사용하는 것이 좋습니다. 문법도 Bootstrap과는 조금 차이가 있지만 Bootstrap으로 몇번 작업을 해보았다면 적응하는데 큰 불편함은 없을 것입니다.

React-Bootstrap

 

사용 방법

1. 터미널을 열고 다음을 입력하여 React-Bootstrap을 설치합니다.

npm install react-bootstrap bootstrap

 

2. React 프로젝트 내에서 import하여 사용합니다. 구성 요소들을 하나씩 import하여 사용해야 합니다.

import React from "react";
import "./App.css";
import Button from "react-bootstrap/Button";

function App() {
  return (
    <>
      <Button>Click</Button>
    </>
  );
}

export default App;