다른 프로젝트를 시작하기 전에 아직
CSS
지식이 부족하기도 하고, 코드를 줄이기 위해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>
- getbootstrap에 접속하여 Documentation 탭으로 들어간다.
- 원하는 레이아웃을 검색한다. (ex. button)
- 그 중에 원하는 버튼 HTML을 내
App.js
에 복붙한다.- 미리보기에서 버튼이 뜨면 성공.
모든 코드들은 내 github을 확인하면 된다.
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>
👉 결과
역시나 디자인이 크게 문제였는데, 리액트에서 React-Bootstrap
을 지원해서 조금 걱정을 덜었다.
React-Bootstrap
을 사용해서 간단한 쇼핑몰하나를 생성해봐야겠다.👍👍