[RP] 2. React-Bootstrap, navbar

🏃Dekay (JuniorDeveloper)·2021년 10월 9일

React bootstrap navbar

React Programming

목록 보기

2/3

다른 프로젝트를 시작하기 전에 아직 CSS 지식이 부족하기도 하고, 코드를 줄이기 위해 Bootstrap이라는 라이브러리를 사용하여 디자인을 해보자.

1. React-Bootstrap ⭐

React-Bootstrap을 설치하면 버튼디자인 메뉴디자인 직접할 필요없이 Bootstrap 홈페이지에 있는 예제코드를 통해 메뉴, 버튼, 3분할 레이아웃 등 원하는 UI들을 쉽게 생성할 수 있다.
Bootstrap을 리액트에 맞게 변형한 React Bootstrap을 설치해보자.
👉 자세한 사용법은 여기를 확인하면 된다.

$ yarn add react-bootstrap bootstrap

위의 명령을 통해 React-Bootstrap을 설치할 수 있다.
설치한 후, 때에 따라 특정 스타일을 사용할 때 Bootstrap CSS 파일을 요구하는 경우가 있다.
그럴 경우 사이트에 있는 CSS 파일을 index.html 파일의 <head> 태그 안에 복붙하면 된다.

//index.html
<head>
  <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
  integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
  crossorigin="anonymous"
/>
</head>

1.1 Bootstrap 사용방법

getbootstrap에 접속하여 Documentation 탭으로 들어간다.

원하는 레이아웃을 검색한다. (ex. button)

그 중에 원하는 버튼 HTML을 내 App.js에 복붙한다.

미리보기에서 버튼이 뜨면 성공.

모든 코드들은 내 github을 확인하면 된다.

react bootstrap로 들어가서 navbar라고 검색하면 다양한 navbar 예제들을 확인할 수 있다.
navbar를 만들기 위해 사용한 코드는 다음과 같다.

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

<Navbar bg="light" expand="lg">
  <Container>
    <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="me-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>
  </Container>
</Navbar>