[React] 👾React Bootstrap 사용법

▷ React Bootstrap

React 기반의 UI 프레임워크로, 미리 디자인된 컴포넌트와 스타일을 제공하여 웹 애플리케이션을 빠르게 개발하고 디자인할 수 있는 도구이다.

👾 설치

npm install react-bootstrap bootstrap

---

👾 index.js

index.js파일에서 import 해주기

/* index.js */
import 'bootstrap/dist/css/bootstrap.min.css'; 

---

👾 Dropdown

import Dropdown from 'react-bootstrap/Dropdown';

function BasicExample() {
  return (
    // Dropdown 컴포넌트를 생성
    <Dropdown>
      // 드롭다운 버튼을 생성
      <Dropdown.Toggle id="dropdown-basic">
        Dropdown Button
      </Dropdown.Toggle>

      // 드롭다운 메뉴를 생성
      <Dropdown.Menu>
        // 각각의 드롭다운 메뉴 아이템을 생성
        <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}

export default BasicExample;

---

👾 Modals

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

function Example() {
  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 are 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 Example;

---

👾 Form

import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';

...
<Form.Group
  controlId="validationFormik101"
  className="position-relative"
>
  <Form.Label>First name</Form.Label>
  <Form.Control
    type="text" // 입력 필드 타입은 텍스트
    name="firstName" // 폼 필드의 이름
    value={values.firstName}
    onChange={handleChange}
    isValid={touched.firstName && !errors.firstName} // 유효한 값인 경우 스타일을 적용
  />
</Form.Group>

Nav, Overlay, Accordion 등등 다양한 컴포넌트 보러가기
👉 (공식문서)react-bootstrap
👉 Material UI로도 간편하게 사용 가능
👉 react-native에서 사용할 수 있는 native-base