React Bootstrap 설치
- React Bootstrap을 사용하기 위해 우선 설치를 하자. Bootstrap까지 같이 설치해주어야 한다.
- Bootstrap은 무료 프론트엔트 프레임워크로 Responsive Web Design을 쉽게 할 수 있게 해준다. Responsive Web Design은 웹사이트가 디바이스의 크기에 맞게 보이도록 자동으로 조절해주는 것이다. React Bootstrap은 Bootstrap을 리액트에 맞게 변형시켜준 라이브러리다.
npm i react-bootstrap bootstrap- 설치하고 나면 React Bootstrap 홈페이지에서 필요한 컴포넌트들을 찾아서 편리하게 갖다 쓰면 된다.
- 나는 index.js에 아래의 코드를 넣어줘야 제대로 부트스트랩이 적용되었다.
import 'bootstrap/dist/css/bootstrap.css';- 때에 따라 특정 스타일 사용 시 Bootstrap CSS 파일을 요구하기도 하는데 그럴 때에는 사이트에 있는 css 파일을 다운받아서 public 폴더에 넣어주면 된다.
- 아니면 CDN 방식으로 라이브러리를 첨부할 수 있는데 CDN은 다른 사이트에서 호스팅해주는 것을 받아서 쓰는 방식이다. 이 방식을 사용하려면 index.html 파일의 <head> 태그 안에 다음의 코드를 넣어주면 된다. 이 코드는 React Bootstrap 사이트의 Get started에서 찾을 수 있다.
레이아웃 디자인
- Navbar 추가
- React Bootstrap 사이트의 Component에서 Navbar 코드를 찾아서 마음에 드는 디자인의 Navbar 코드를복붙한다. 나는 Offcanvas를 사용해보도록 하겠다.
- App.js에 우선 그대로 붙여넣어 보았다. 이때 상단에 사용되는 컴포넌트들을 잘 import해주도록 하자.
import React from 'react';
import './App.css';
import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Offcanvas from 'react-bootstrap/Offcanvas';
function App() {
return (
<div className="App">
{['lg'].map((expand) =>
<Navbar key={expand} bg="light" expand={expand} className="mb-3">
<Container fluid>
<Navbar.Brand href="#">TMI</Navbar.Brand>
<Navbar.Toggle aria-controls={`offcanvasNavbar-expand-${expand}`} />
<Navbar.Offcanvas
id={`offcanvasNavbar-expand-${expand}`}
aria-labelledby={`offcanvasNavbarLabel-expand-${expand}`}
placement="end"
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id={`offcanvasNavbarLabel-expand-${expand}`}>
TMI
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav className="justify-content-end flex-grow-1 pe-3">
<Nav.Link href="#action1">Home</Nav.Link>
<Nav.Link href="#action2">Login</Nav.Link>
<Nav.Link href="#action2">Logout</Nav.Link>
<Nav.Link href="#action2">Setting</Nav.Link>
<Nav.Link href="#action2">Write</Nav.Link>
<Nav.Link href="#action2">Saved</Nav.Link>
<NavDropdown
title="Dropdown"
id={`offcanvasNavbarDropdown-expand-${expand}`}
>
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
<NavDropdown.Item href="#action4">
Another action
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action5">
Something else here
</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form className="d-flex">
<Form.Control
type="search"
placeholder="Search"
className="me-2"
aria-label="Search"
/>
<Button variant="outline-success">Search</Button>
</Form>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
)}
</div>
);
}
export default App;- 사이트에 있는 코드를 그대로 복붙하면 Navbar가 6개나 생기는데 이는 배열에 다양한 크기별로 볼 수 있게 친절하게 코드를 제공해서 그러니까 위와 같이 map 함수가 적용되는 배열에 원하는 1개만 남기면 Navbar 1개만 볼 수 있다.
- 화면이 작을 때는 아래와 같이 보인다. 오른쪽 사진은 햄버거 버튼 클릭 시 나타나는 메뉴이다.
- 화면이 클 때는 이렇게 보인다.
- 근데 App.js 파일에 있으면 복잡하니까 src에 components 폴더를 만들어서 Navbar 따로 빼줬다.
import React from 'react';
import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Offcanvas from 'react-bootstrap/Offcanvas';
function Nav_() {
return (
<div>
{['lg'].map((expand) =>
<Navbar key={expand} bg="light" expand={expand} className="mb-3">
<Container fluid>
<Navbar.Brand href="#">TMI</Navbar.Brand>
<Navbar.Toggle aria-controls={`offcanvasNavbar-expand-${expand}`} />
<Navbar.Offcanvas
id={`offcanvasNavbar-expand-${expand}`}
aria-labelledby={`offcanvasNavbarLabel-expand-${expand}`}
placement="end"
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id={`offcanvasNavbarLabel-expand-${expand}`}>
TMI
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav className="justify-content-end flex-grow-1 pe-3">
<Nav.Link href="#action1">Home</Nav.Link>
<Nav.Link href="#action2">Login</Nav.Link>
<Nav.Link href="#action2">Logout</Nav.Link>
<Nav.Link href="#action2">Setting</Nav.Link>
<Nav.Link href="#action2">Write</Nav.Link>
<Nav.Link href="#action2">Saved</Nav.Link>
<NavDropdown
title="Dropdown"
id={`offcanvasNavbarDropdown-expand-${expand}`}
>
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
<NavDropdown.Item href="#action4">
Another action
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action5">
Something else here
</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form className="d-flex">
<Form.Control
type="search"
placeholder="Search"
className="me-2"
aria-label="Search"
/>
<Button variant="outline-success">Search</Button>
</Form>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
)}
</div>
);
}
export default Nav_;이렇게 따로 파일로 생성해놓고 App.js에서는 imort 해서 사용해준다.
import React from 'react';
import './App.css';
import Nav_ from './components/Nav';
function App() {
return (
<div className="App">
<Nav_ />
</div>
);
}
export default App;'프로젝트 > TMI' 카테고리의 다른 글
| 5. 피드 페이지 만들기 (0) | 2022.10.12 |
|---|---|
| 4. 필요한 페이지 레이아웃 구현 (0) | 2022.10.07 |
| 3. 로그인 페이지 구현 (0) | 2022.10.02 |
| 2. React Router 기본 셋팅 (0) | 2022.10.01 |
| 0. 프로젝트 생성 (0) | 2022.09.17 |
