[리액트 React] reactstrap 사용하는 법 / reactstrap 실무에서 사용하는 기능 공유 / reactstrap 종류

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 리액트로 개발할 때 유용하게 사용되는 reactstrap에 대해 다뤄볼게요!

지금부터는 가독성을 위해 문어체를 사용하겠습니다.

 

 

  reactstrap이란?

bootstrap을 react에서 사용할 수 있도록 패키지로 만든 것.

 

  reactstrap 사용법

1. cmd창에 명령어 차례 대로 입력하기

npm install --save reactstrap
npm install --save bootstarp     // reactstrap은 bootstrap을 포함하지 않고 있어서 따로 설치해줘야 함.

 

2. App.js 상단에 bootstrap CSS import 해주기

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';

 

3. 원하는 기능을 아래 포스팅 중에 골라서 사용하면 된다.

그리고 아래의 문서들은 모두 [ 클래스형 컴포넌트 / 함수형 컴포넌트 ] 를 각각 볼 수 있도록 작성해두었다. 

1) alerts

[리액트 React] reactstrap Alerts

 

2) badge

[리액트 React] 실무에서 유용하게 사용되는 reactstrap Badge

 

3) breadcrumgs
사이트 구조 중 어디에 위치했는지 보여주는 기능

[리액트 React] 실무에서 유용하게 사용되는 reactstrap Breadcrumbs

 

4) button-dropdown

[리액트 React] 실무에서 유용하게 사용되는 reactstrap Button Dropdown

 

5) button-group

[리액트 React] 실무에서 유용하게 사용 되는 reactstrap Button Group

 

6) buttons

[리액트 React] 실무에서 유용하게 사용 되는 reactstrap Buttons

 

7) card

[리액트 React] 실무에서 유용하게 사용되는 reactstrap Card

 

 

계속 추가될 예정 !