[React] 리액트에서 부트스트랩 사용하기

Introduction

1. 부트스트랩이란?

부트스트랩(Bootstrap)은 웹 개발에서 자주 사용되는 프론트엔드 프레임워크입니다. 트위터에서 개발된 부트스트랩은 HTML, CSS, JavaScript를 기반으로 하여 반응형 웹 디자인을 쉽게 구현할 수 있도록 도와줍니다. 웹 사이트와 웹 애플리케이션의 UI(사용자 인터페이스)를 빠르고 일관성 있게 개발할 수 있는 도구와 컴포넌트를 제공합니다.

2. 리액트에서의 부트스트랩

리액트에서는 리액트환경에 맞춘 'react-bootstrap'을 사용합니다. 리액트의 컴포넌트 기반 아키텍처에 맞춰 bootstrap의 기능을 제공합니다.

공식문서

3. react-bootstrap의 특징

모듈식 컴포넌트 : 필요한 컴포넌트만 개별적으로 가져와서 사용할 수 있습니다.

커스터마이징 : 테마와 스타일을 쉽게 커스터마이징할 수 있습니다.

JavaScript 종속성 제거 : Bootstrap의 JavaScript 부분을 React로 재작성하여 종속성을 제거했습니다.

4. 설치

npm install react-bootstrap bootstrap
# 또는
yarn add react-bootstrap bootstrap

5. 기본 사용법

기본적으로 Bootstrap CSS 파일을 프로젝트에 포함해야합니다.

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

예시 몇 개를 소개합니다.

1. 버튼 사용법

리액트 - 부트스트랩 버튼 공식문서

import React from 'react';
import { Button } from 'react-bootstrap';

function App() {
  return (
    <div>
      <Button variant="primary">Primary Button</Button>
      <Button variant="secondary">Secondary Button</Button>
    </div>
  );
}

export default App;

2. 네비게이션 바 사용법
   리액트 - 부트스트랩 네브바 공식문서

import React from 'react';
import { Navbar, Nav, NavDropdown } from 'react-bootstrap';

function App() {
  return (
    <Navbar bg="light" expand="lg">
      <Navbar.Brand href="#home">Navbar</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#link">Link</Nav.Link>
          <NavDropdown title="Dropdown" id="basic-nav-dropdown">
            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
          </NavDropdown>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

export default App;

3. Form 사용법

리액트 - 부트스트랩 폼 공식문서

import React from 'react';
import { Form, Button } from 'react-bootstrap';

function App() {
  return (
    <Form>
      <Form.Group controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="Enter email" />
        <Form.Text className="text-muted">
          We'll never share your email with anyone else.
        </Form.Text>
      </Form.Group>

      <Form.Group controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control type="password" placeholder="Password" />
      </Form.Group>

      <Form.Group controlId="formBasicCheckbox">
        <Form.Check type="checkbox" label="Check me out" />
      </Form.Group>

      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  );
}

export default App;

4. 모달 사용법

리액트 - 부트스트랩 모달 공식문서

import React, { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';

function App() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export default App;

6. 부트스트랩 사용의 장단점

1. 장점

• 빠른 개발 속도 : 미리 만들어진 요소의 사용으로 디자인을 표현하는 개발 속도가 빨라집니다.
• 반응형 디자인을 지원하며, 다양한 화면 크기에 맞춰 자동으로 조정됩니다.
• 일관된 디자인 : 디자인과 스타일을 일관되게 유지할 수 있습니다.
• 풍부한 UI 컴포넌트
• 커스터마이징
• 많은 리소스와 커뮤니티 지원

2. 단점

• 디자인 유사성 : 많은 사이트에서 사용하는 만큼 비슷한 사이트로 보일 수 있습니다.

7. Tip

리액트 - 부트스트랩 공식문서 페이지에서는 코드를 공식문서 페이지 내부에서 수정해보면서 자신에게 맞는 스타일을 만들어서 코드를 가져올 수 있습니다.

이렇게 되있는 카드의 구성에서 Go somewhere 라고 적혀있는 버튼의 배경색을 바꾸려면

이렇게 코드를 바로 수정하고,

 

결과물을 바로 확인해볼 수 있습니다.

이렇게 커스터마이징까지 어느정도 마치고 코드를 가져올 수 있어 매우 편리합니다.