[리액트] react-bootstrap 컴포넌트 사용하기

소요 시간: 5분 조회수: 193

이제 react-bootstrap을 사용하여 부트스트랩 컴포넌트를 리액트 스타일로 사용할 수 있습니다. 몇 가지 예제를 통해 주요 컴포넌트를 구현해보겠습니다.


React-Bootstrap 컴포넌트

React-Bootstrap 컴포넌트는 Bootstrap의 스타일과 기능을 React 애플리케이션에서 사용할 수 있도록 제공하는 라이브러리입니다. Bootstrap은 인기 있는 CSS 프레임워크로, 반응형 웹 디자인을 쉽게 구현할 수 있는 다양한 스타일과 컴포넌트를 제공합니다. React-Bootstrap은 이러한 Bootstrap의 기능을 React 컴포넌트 형태로 제공하여, React 개발자가 더욱 편리하게 스타일링과 UI 구성을 할 수 있게 합니다.

React-Bootstrap 컴포넌트를 사용하는 주요 이유는 다음과 같습니다:


리액트 부트스트랩 컴포넌트 사용 예제

1. 네비게이션 바 만들기

먼저, 네비게이션 바를 생성합니다. 이를 위해 Navbar, Nav, NavDropdown 컴포넌트를 사용합니다.

// src/components/Navbar.js

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

const MyNavbar = () => {
  return (
    <Navbar bg="light" expand="lg">
      <Navbar.Brand href="#home">React-Bootstrap</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 MyNavbar;


2. 카드 컴포넌트 만들기

다음으로, 카드 컴포넌트를 생성합니다. 이를 위해 Card와 Button 컴포넌트를 사용합니다.

// src/components/Card.js

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

const MyCard = () => {
  return (
    <Card style={{ width: '18rem' }}>
      <Card.Img variant="top" src="https://via.placeholder.com/150" />
      <Card.Body>
        <Card.Title>Card Title</Card.Title>
        <Card.Text>
          Some quick example text to build on the card title and make up the bulk of the card's content.
        </Card.Text>
        <Button variant="primary">Go somewhere</Button>
      </Card.Body>
    </Card>
  );
}

export default MyCard;


3. 전체 레이아웃 설정

이제 네비게이션 바와 카드 컴포넌트를 조합하여 전체 레이아웃을 설정합니다. Container, Row, Col 컴포넌트를 사용하여 레이아웃을 구성합니다.

// src/App.js

import React from 'react';
import MyNavbar from './components/Navbar';
import MyCard from './components/Card';
import { Container, Row, Col } from 'react-bootstrap';

const App = () => {
  return (
    <div>
      <MyNavbar />
      <Container>
        <Row>
          <Col>
            <MyCard />
          </Col>
          <Col>
            <MyCard />
          </Col>
          <Col>
            <MyCard />
          </Col>
        </Row>
      </Container>
    </div>
  );
}

export default App;


4. 실행 및 확인

설정을 완료했으면 애플리케이션을 실행하여 브라우저에서 확인합니다.

앱 실행

$ npm start

브라우저에서 확인

브라우저를 열고 http://localhost:3000에서 웹페이지를 확인합니다.


이 과정을 통해 react-bootstrap을 사용하여 부트스트랩 컴포넌트를 리액트에서 편리하게 사용할 수 있습니다. react-bootstrap은 부트스트랩의 모든 기능을 리액트 컴포넌트로 제공하기 때문에, 더 복잡한 UI를 쉽게 구현할 수 있습니다.

인기글

리액트 리스트