[React] reactstrap이란?

개요

React 프로젝트를 진행하면서 사용할 수 있는 템플릿 코드를 사용하고 있는데, reactstrap이라는게 코드에 나오면서 엥? 이게 뭐지 bootstrap은 아는데 이건 또 처음 보네. 뭔지는 알아야 쓸 수 있으니까 정리해보자

 

 

1. reactstrap이란?

Bootstrap의 경우 반응형 레이아웃이나 다양한 UI 컴포넌트를 제공해 빠르고 효율적인 웹 개발을 가능하게 하는 CSS 프레임워크의 하나이다.

 

그 중 reactstrap은 React에서 Bootstrap을 쉽게 활용할 수 있도록 도와주는 라이브러리이다. Bootstrap의 다양한 컴포넌트를 React 방시긍로 제공하고, 스타일을 손쉽게 적용할 수 있도록 설계되어있다.

 

특징

1) Bootstrap 기반

-> Bootstrap의 UI 컴포넌틀르 React에서 바로 사용할 수 있다.

 

2) 컴포넌트 기반

-> React의 방식에 맞게 Bootstrap 요소가 컴포넌트화됨

 

3) 빠른 개발 가능

-> CSS와 JavaScript를 따로 관리할 필요 없이 Bootstrap의 강력한 기능을 활용할 수 있다.

 

4) TypeScript 지원

-> 타입 안정성이 필요한 경우 TypeScript와 함께 사용이 가능하다.

 

1-1. 설치

-> 먼저 reactstrap과 bootstrap을 설치해야 한다.

npm install reactstrap bootstrap

# or

yarn add reactstrap bootstrap

 

-> 설치 완료 후 index.js 또는 App.js에서 Bootstrap CSS 파일을 불러와야 한다.

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

 

1-2. 기본 사용법

-> reactstrap에서 제공하는 컴포넌트는 HTML 태그처럼 사용할 수 있다.

 

Button

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

const Example = () => {
    return (
        <div>
            <Button color="primary">Primary 버튼 </Button>
            <Button color="secondary">Secondary 버튼</Button>
        </div>
    );
};

export default Example;

 

-> Button 컴포넌트는 reactstrap에서 제공하는 컴포넌트이다.

-> color 속성을 사용해 다양한 스타일을 적용할 수 있다.

 

Container

import React from 'react';
import { Container, Row, Col } from 'reactstrap';

const GridExample = () => {
  return (
    <Container>
      <Row>
        <Col md="6">컬럼 1</Col>
        <Col md="6">컬럼 2</Col>
      </Row>
    </Container>
  );
};

export default GridExample;

 

-> Container는 Bootstrap의 기본 컨테이너 역할을 한다.

-> Row는 가로 정렬을 위한 행을 생성하고, Col을 내부에 배치해 컬럼을 만든다.

 

또 다른 카드나 모달같은 것들도 있는데 이거는 직접 적용해보면서 정리해보자.