React-bootstrap Header.js 테스트

https://react-bootstrap.github.io/getting-started/introduction/

React-Bootstrap

에 설명된 것처럼

npm install react-bootstrap bootstrap

으로 모듈을 추가하고, App.js 또는 index.js 에

import 'bootstrap/dist/css/bootstrap.min.css';

를 추가한다.

 

Header.js 파일을 아래와 같이 하고 테스를 했더니 PC화면 사이즈에서는 속도 문제는 없다.

Navbar.Offcanvas 기능이 활성화되는 스마트폰 크기로 되었을 때 Menu 반응속도가 너무 느리다.

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';
 
const Header = () => {
    return (
        <>
            <Navbar bg="primary" expand='sm' className="mb-3">
                <Container fluid>
                    <Navbar.Brand href="/">Navbar</Navbar.Brand>
                    <Navbar.Toggle aria-controls='navbar-expand-sm'/>
                    <Navbar.Offcanvas id='navbar-expand-sm' aria-labelledby='navbar-expand-sm' placement="end">
                        <Offcanvas.Header closeButton>
                            <Offcanvas.Title id='navbarLabel-expand-sm'>
                                홍길동
                            </Offcanvas.Title>
                        </Offcanvas.Header>
                        <Offcanvas.Body>
                            <Nav className="justify-content-end flex-grow-1 pe-3">
                                <Nav.Link href="/">Home</Nav.Link>
                                <Nav.Link href="/login">Login</Nav.Link>
                                <Nav.Link href="/register">Sign Up</Nav.Link>
                                <NavDropdown title="Dropdown" id='navbarDropdown-expand-sm'>
                                    <NavDropdown.Item href="/login">로그인</NavDropdown.Item>
                                    <NavDropdown.Item href="/register">회원가입</NavDropdown.Item>
                                    <NavDropdown.Divider/>
                                    <NavDropdown.Item href="#action5">
                                        Something else here
                                    </NavDropdown.Item>
                                </NavDropdown>
                            </Nav>
                        </Offcanvas.Body>
                    </Navbar.Offcanvas>
                </Container>
            </Navbar>
        </>
    )
}
 
export default Header;

 

Navbar.Offcanva 기능이 없는 단순 형태 구성 코드는 속도 문제 없었다.

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
 
const Header = () => {
    return (
        <>
            <Navbar bg="primary" variant="dark">
                <Container fluid>
                    <Navbar.Brand href="/">Navbar</Navbar.Brand>
                    <Navbar.Toggle aria-controls="responsive-navbar-nav"/>
                    <Navbar.Collapse id="responsive-navbar-nav">
                        <Nav className="me-auto">
                            <Nav.Link href="/">Home</Nav.Link>
                            <Nav.Link href="/register">Register</Nav.Link>
                            <Nav.Link href="/login">Login</Nav.Link>
                        </Nav>
                    </Navbar.Collapse>
                </Container>
            </Navbar>
        </>
    )
}
 
export default Header;

Layout 구성하는 것에 대해서 좀 더 다양한 테스트를 해봐야 알 수 있을 듯 싶다.