[React] - 14) reactstrap으로 프로젝트를 꾸며보기

웹 페이지를 꾸밀 때 대표적으로 부트스트랩을 많이 사용합니다.

 

리액트에서 부트스트랩을 적용시킬 때는 부트스트랩의 리액트 버전인 reactstrap을 사용합니다.

 

저 같은 경우 yarn의 create react-app으로 프로젝트를 생성하였다면, 다음과 같은 명령어로 reactstrap을 추가해 줍시다.

 

$ yarn add bootstrap reactstrap

 

reactstrap은 기본적으로 부트스트랩의 css파일을 가져다 사용하기 때문에 부트스트랩도 같이 설치해줍시다.

 

이제 src/index.js에 다음과 같은 코드를 추가해 주세요.

 

import 'bootstrap/dist/css/bootstrap.css'

 

이제 App.js에서 reactstrap을 적용해 봅시다.

 

reactstrap에서 사용할 수 있는 스타일의 종류는 공식 깃허브 사이트에서 확인 가능합니다.

https://reactstrap.github.io/components/alerts/

 

우선 간단한 버튼을 하나 추가해 볼까요 ?

 

App.js를 다음과 같이 변경해 주세요.

import React from 'react';
import { Button } from 'reactstrap'
function App() {
  return (
    <div>
      <Button color="primary">primary</Button>{''}
    </div>
  );
}

export default App;

 

다음과 같은 버튼이 생기면 성공적으로 reactstrap을 적용한 것입니다!

 

열심히 scss파일을 작성하던 제 시간이 다소 부질없게(?) 느껴지는군요 .. ㅠㅠ