React(14) - Bootstrap 연결하기(Navbar와 Link추가)

[주인장]

https://react-bootstrap.netlify.app/docs/getting-started/introduction

Introduction | React Bootstrap

* index.html(추가 혹은 index.js에 아래처럼 추가)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"

    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />

* index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import { BrowserRouter } from 'react-router-dom';

import 'bootstrap/dist/css/bootstrap.min.css';  // CSS 추가 

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <BrowserRouter>

    <App />

  </BrowserRouter>,

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

* Header.js

import React from 'react';

import { styled } from 'styled-components';

import { Link } from 'react-router-dom';

import {

  Navbar,

  Container,

  Nav,

  NavDropdown,

  Form,

  Button,

} from 'react-bootstrap';

// 하나의 컴포넌트를 생성(재사용 가능)

// styled-components를 사용하여 js와 css를 함께 사용할 수 있음

const StyledHeaderDiv = styled.div`

  border: 1px solid red;

  height: 150px;

  background-color: ${(props) => props.backgroundColor};

`;

// 스타일이 없는 경우 상속 받아서 사용

const StyledHeadLink = styled(Link)`

  color: red;

  font-size: 20px;

  font-weight: bold;

  text-decoration: none;

`;

const Header = () => {

  return (

    <div>

      <StyledHeaderDiv backgroundColor={'green'}>

        <ul>

          <li>

            <StyledHeadLink to="/">Home</StyledHeadLink>

          </li>

          <li>

            <StyledHeadLink to="/login/10">Login</StyledHeadLink>

          </li>

        </ul>

      </StyledHeaderDiv>

      <div>

        <Navbar  expand="lg" bg="dark" variant="dark">

          <Container fluid>

            <Link to='/' className='navbar-brand'>Kitae's Home</Link>

            <Navbar.Toggle aria-controls="navbarScroll" />

            <Navbar.Collapse id="navbarScroll">

              <Nav className="me-auto my-2 my-lg-0"

                style={{ maxHeight: '100px' }}

                navbarScroll>

                <Link to='/' className='nav-link'>Home</Link>

                <Link to='/login/10' className='nav-link'>Login</Link>

                <NavDropdown title="Link" id="navbarScrollingDropdown">

                  <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.Link href="#" disabled>

                  Link

                </Nav.Link>

              </Nav>

              <Form className="d-flex">

                <Form.Control

                  type="search"

                  placeholder="Search"

                  className="me-2"

                  aria-label="Search"

                />

                <Button variant="outline-success">Search</Button>

              </Form>

            </Navbar.Collapse>

          </Container>

        </Navbar>

      </div>

    </div>

  );

};

export default Header;

<< 결과 >>