리액트스트랩 시작하기

가장 유명한 프론트엔드 웹 프레임워크인 부트스트랩을 아시나요?

트위터 부트스트랩은 가장 유명한 프론트엔드 웹 프레임워크입니다. 아주 깔끔하면서 트위터에서 사용할 만한 디자인으로 쉽게 웹 페이지를 꾸밀 수 있게 해줍니다. 리액트스트랩은 부트스트랩의 리액트 버전입니다. 튜토리얼을 통해서 간단하게 리액트스트랩(과 부트스트랩)을 다루는 방법을 배워보도록 하겠습니다.

리액트스트랩

다운로드 하기

우선은 create-react-app으로 리액트 환경을 만들어보도록 하겠습니다.

npx create-react-app 프로젝트명

해당 명령어로 프로젝트를 만들어주세요.

이제 생성한 프로젝트로 가서 리액트스트랩과 부트스트랩을 다운로드 받아주시면 됩니다.

yarn add bootstrap reactstrap

부트스트랩까지 다운로드 받는 이유는 리액트스트랩이 부트스트랩의 css 파일을 포함하고 있지 않기 때문입니다.

다운로드가 완료되면 src 폴더에 있는 index.js파일에 부트스트랩을 더해주시면 됩니다.

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

이제는 사용할 컴포넌트를 불러와서 값만 넣어주시면 됩니다.

공식홈페이지에 컴포넌트 보러가기

아주 간단하죠? 몇 가지만 더 알면 아주 쉽게 리액트스트랩과 부트스트랩을 이용할 수 있습니다. 다음 포스팅에서는 레이아웃 잡는 방법을 포스팅 해보도록 하겠습니다.