[React] Bootstrap 사용하기

1. 라이브러리 설치

// 부트스트랩 설치 라이브러리
npm i react-bootstrap bootstrap
// 부트스트랩 아이콘을 리액트 컴포넌트로 사용할 수 있게 해주는 라이브러리
npm i react-bootstrap-icons

import { configureStore } from "@reduxjs/toolkit";
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App";
import reducer from "./store";
import "bootstrap/dist/css/bootstrap.min.css";

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

const store = configureStore({
  reducer: reducer,
});

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

2. 리액트 부트스트랩

React Bootstrap | React Bootstrap

The most popular front-end framework, rebuilt for React

https://react-bootstrap.netlify.app/

import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';

function App() {
  return (
    <Navbar className="bg-primary" >
      <Container>
        <Navbar.Brand href="#home">Navbar with text</Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse className="justify-content-end">
          <Navbar.Text>
            Signed in as: <a href="#login">Mark Otto</a>
          </Navbar.Text>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default App;

3. 네브바 링크 연결하기

import { Nav, Navbar } from "react-bootstrap";
import { BrowserRouter, Link } from "react-router-dom";

function App() {
  return (
    <div>
      <Navbar bg="dark" expand="lg" variant="dark">
        <Link to="/" className="navbar-brand">
          블로그홈
        </Link>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Link to="/saveForm" className="nav-link">
              글쓰기
            </Link>
            <Link className="nav-link">로그아웃</Link>
            <Link to="/loginForm" className="nav-link">
              로그인
            </Link>
            <Link to="/joinForm" className="nav-link">
              회원가입
            </Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      </div>
  );
}

export default App;

import { configureStore } from "@reduxjs/toolkit";
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App";
import reducer from "./store";
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter } from "react-router-dom";

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

const store = configureStore({
  reducer: reducer,
});

root.render(
  <BrowserRouter>
  <Provider store={store}>
    <App />
  </Provider>
  </BrowserRouter>
);