UI 라이브러리 - React Bootstrap (2. 주요 UI)

<Container />

사이트 콘텐츠를 중앙에 배치하고 가로로 채울 수 있는 컴포넌트이다. 이 안에서 사용할 수 있는 행과 열로 <Row /> 와 <Col /> 이 있다.

fluid prop을 주면 모든 뷰포트 및 기기 크기에서 너비 100%에 사용할 수 있다.
또한 xs, md 등의 break point 속성을 활용하여 해당 포인트지점에서의 너비를 설정할 수 있다.

// 명확한 구분을 위해 스타일을 따로 지정하였다.
const ContainerExample: FC = () =>  {
  return (
      <Container>
        <Row>
          <Col xs={12} md={8}>
            xs=12 md=8
          </Col>
          <Col xs={6} md={4}>
            xs=6 md=4
          </Col>
        </Row>
        <Row>
          <Col xs={6} md={4}>
            xs=6 md=4
          </Col>
          <Col xs={6} md={4}>
            xs=6 md=4
          </Col>
          <Col xs={6} md={4}>
            xs=6 md=4
          </Col>
        </Row>
        <Row>
          <Col xs={6}>xs=6</Col>
          <Col xs={6}>xs=6</Col>
        </Row>
      </Container>
  );
}

큰 화면

작은 화면

<DropdownButton />

드랍다운 목록을 보여주는 select box이다. <Dropdown.Item /> 컴포넌트로 아이템을 지정할 수 있다.
eventKey는 onSelect 핸들러 함수에 전달될 고유 식별값이다.

<DropdownButton as={ButtonGroup} title='dropdown' id='bg-nested-dropdown'>
  <Dropdown.Item eventKey='1'>I1</Dropdown.Item>
  <Dropdown.Item eventKey='2'>I2</Dropdown.Item>
  <Dropdown.Item eventKey='3'>I3</Dropdown.Item>
</DropdownButton>

<Spinners />

로딩을 표현할 수 있다. animation에는 border와 grow가 있으며, grow는 점점 커지는 원형 모양이다.
variant속성은 색상을 표현할 수 있다.

<Spinner animation="border" variant="primary" />
<Spinner animation="border" variant="secondary" />
<Spinner animation="border" variant="success" />

<Toast />

가볍고 쉽게 사용자 정의할 수 있는 경고 메시지인 토스트로 사용자에게 알림을 보낸다.

<Toast>
  <Toast.Header>
    <strong className="me-auto">Bootstrap</strong>
    <small>13 mins ago</small>
  </Toast.Header>
  <Toast.Body>Hello, world! This is a toast message.</Toast.Body>
</Toast>