React에 간편하게 bootstrap 4를 달아보자!

최근 리액트 프로젝트를 시작하며 어떠한 스타일링 라이브러리를 달아볼까 생각하다가 아직은 알파버전이지만 쉽고 직관적인 class와 scss를 사용하는 bootstrap4를 적용하기로 했습니다. bootstrap을 적용하는 여러가지 방법이 있지만 쉽고 유용한 방법을 찾던 중 reactstrap 이라는 프로젝트를 발견하게 되었죠!

bootstrap의 다양한 엘리먼트들을 컴포넌트로 제공해서 직접 import 하여 사용할 수 있는 편리한 라이브러리입니다.

자세한 내용은 프로젝트 페이지에 나와있지만 그래도 한국어로 옮겨보겠습니다..

설치하기

NPM

reactstrap과 그에 관련된 디펜던시들을 설치합니다:

npm install --save reactstrap react-addons-transition-group react-addons-css-transition-group react react-dom

필요한 컴포넌트를 원하는대로 불러옵니다:

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

export default (props) => {
return (
<Button color="danger">Danger!</Button>
);
};
짱편함;;

Create-React-App으로 시작하기

Create React App은 페이스북에서 공식으로 제공하는 리액트 보일러플레이트인데 귀찮은 설정없이 빠르게 빠르게 리액트 프로젝트를 시작할 수 있죠. 쉽게 npm 으로 인스톨할 수 있어 굉장히 편리합니다.

create-react-app 설치(자세히):

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

여기에 bootstrap4 를 얹어봅시다:

npm install bootstrap@4.0.0-alpha.6 --save
npm install --save reactstrap react-addons-transition-group react-addons-css-transition-group react react-dom
src/index.js

해당 라이브러리엔 bootstrap css가 포함되어 있지 않기때문에 모두 설치해주어야 합니다.

이제 메인 index.js( src/index.js )에서 bootstrap css를 불러오겠습니다:

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

설정은 완료!

이제 필요한 bootstrap 요소들은 원하는 컴포넌트에서 아래와 같이 불러오면 됩니다:

import { Button } from 'reactstrap';`

요소 목록

라이브러리에서 불러올 수 있는 요소들은 해당 링크에 자세히 소개되어 있습니다. 이제 편한 스타일링 합시다! 헤헷