[TIL]reactstrap이란?

reactstrap

reactstrap을 공부하기전 먼저 bootstrap이 뭔지 알아보겠습니다.
부트스트랩 사이트에 접속하면 이와 같은 문구를 볼 수 있습니다.

부트스트랩은 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임 워크 입니다.

부트스트랩 : http://bootstrapk.com/
즉 웹사이트 개발의 효율을 올려주는 프레임워크 입니다. 그럼 reactstrap은 무엇일까요.
네. reactstrap은 bootstrap을 react에서 더 쉽게 사용하기 위한 프레임워크 입니다.

reactstrap에는 CSS가 포함 되어 있지 않으므로 bootstrap도 꼭 같이 설치해야 합니다.

yarn add bootstrap
yarn add reactstrap 

그리고 src/index.js 파일에 bootstrap CSS를 import해줍니다.

//index.js
import "bootstrap/dist/css/bootstrap.min.css";

그후 편하게 어디서든 사용하시면 됩니다.

//app.js
import React from "react";
import { Button } from "reactstrap";

function App() {
  return (
    <div className="App">
      <Button color="info">info</Button>
      <Button color="danger">danger</Button>
      <Button color="success">success</Button>
    </div>
  );
}

export default App;

위처럼 개발자가 직접 버튼CSS를 백지부터 작성하지 않아도 이쁜 버튼이 나오는걸 보실수 있습니다.

---

한가지 더 예를 보여드리겠습니다.

import React from 'react';
import { Alert } from 'reactstrap';

const Example = (props) => {
  return (
    <div>
      <Alert color="primary">
        This is a primary alert — check it out!
      </Alert>
      <Alert color="secondary">
        This is a secondary alert — check it out!
      </Alert>
      <Alert color="success">
        This is a success alert — check it out!
      </Alert>
    </div>
  );
};

export default Example;

---

이처럼 CSS를 맨 땅에 해딩 하듯 처음부터 작성하지 않고 틀이 완성된 상태에서 개발자의 입맛대로 바꿔 디자인 할수 있다면 개발 시간이 많이 단축될수 있을것이라고 생각합니다!
이제 막 저도 이용하기 시작했지만 편리한 프레임워크라고 생각합니다! 여러분들도 한번 사용해 보세요: )