[React] 5주차 스터디 - react-bootstrap

목차

1. React-Bootstrap란?
2. 시작하기
3. 여러 가지 컴포넌트 사용하기
4. react-bootstrap으로 인프런 사이트 클론 코딩하기

참고 자료

• React-Bootstrap 공식 문서

 

---

1. react-bootstrap란?

부트스트랩(bootstrap)은 오픈소스 프론트엔드 프레임워크이다. 웹사이트를 쉽게 만들 수 있도록 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 제공하고 있다.

리액트에서 부트스트랩을 사용하는 경로는 react-bootstrap, reactstrap 두 가지가 있는데, 본 스터디에서는 react-bootstrap을 사용한다.

react-bootstrap은 기존의 부트스트랩을 리액트 스타일의 컴포넌트로 압축하여 코드가 간단해진다는 장점이 있다.

 

2. 시작하기

react-bootstrap 패키지 설치

npm install react-bootstrap bootstrap

css 스타일시트 추가

최상단의 루트파일인 src/index.js 또는 App.js 파일에 코드를 추가하면 부트스트랩의 스타일을 적용할 수 있다.

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

 

3. 여러 가지 컴포넌트 사용하기

공식 문서에서 button, alert, badge, navbar 등 다양한 컴포넌트 활용 예시를 확인할 수 있다. 예를 들어 Button을 추가하려고 한다면 하단의 절차를 따른다.

원하는 컴포넌트 불러오기

버튼을 넣으려고 하는 컴포넌트 파일 상단에 코드를 추가한다.

import Button from "react-bootstrap/Button";
// 또는
import { Button } from "react-bootstrap";

컴포넌트 사용하기

<Button> 태그를 통해 Button 컴포넌트를 사용한다.

App.js

import React from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button } from "react-bootstrap"

function App() {
  return (
      <div className="App">
        <Button>Hello</Button>
      </div>
  );
}

export default App;

실행 결과는 다음과 같다.

다양한 옵션 활용하기

컴포넌트 별로 다양한 옵션이 제공되고 있다. Button의 경우에는 아래와 같다.

<Button variant="info">Hello</Button>

variant="info" 옵션을 추가해주면 버튼 디자인이 바뀌는 것을 확인할 수 있다.

 

4. react-bootstrap으로 인프런 사이트 클론 코딩하기

공식 문서의 컴포넌트 활용 예시를 참고하여 여러 사이트의 디자인과 유사하게 구현할 수 있다.

인프런 사이트

react-bootstrap으로 구현한 화면

또한, Modal을 통해 팝업창을 구현할 수 있다.

(좌)인프런 (우)react-bootstrap으로 구현한 화면