9. Bootstrap

Jul 15, 2025

Contents

라이브러리


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

index.js


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

Bootstrap

React Bootstrap | React Bootstrap

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

원하는 부트스트랩 가져오기


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

function TextLinkExample() {
  return (
    <Navbar className="bg-body-tertiary">
      <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 TextLinkExample;

내꺼에 적용하기


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;

📌

이 오류는 react-router-dom 의 Link 컴포넌트가 basename 이라는 속성을 useContext 훅을 통해 가져오려고 할 때 발생하는 문제로, useContext 의 반환 값이 null이기 때문에 발생한다. 이는 BrowserRouter 나 Router 컴포넌트로 애플리케이션을 감싸지 않아서 발생할 수 있다. Link 와 같은 react-router-dom 컴포넌트를 사용할 때, 반드시 라우터 컴포넌트로 감싸야 한다.

해결 방법


import { configureStore } from "@reduxjs/toolkit";
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>
);