1. 기본 레이아웃 제작

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

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

1. 기본 레이아웃 제작

React Bootstrap 설치

레이아웃 디자인

'프로젝트 > TMI' 카테고리의 다른 글

React Bootstrap 설치

레이아웃 디자인

'프로젝트 > TMI' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	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;

	import React from 'react';
	import './App.css';
	import Nav_ from './components/Nav';

	function App() {
	return (
	<div className="App">
	<Nav_ />
	</div>
	);
	}

	export default App;

React Bootstrap 설치

레이아웃 디자인

'프로젝트 > TMI' 카테고리의 다른 글

React Bootstrap 설치

레이아웃 디자인

'프로젝트 > TMI' 카테고리의 다른 글

개인정보

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역