[React] Bootstrap 사용하기

류재성

Aug 07, 2024

Contents

1. 라이브러리 설치 2. 리액트 부트스트랩 3. 네브바 링크 연결하기

1. 라이브러리 설치

💡

부트스트랩은 트위터에서 개발한 프론트앤트 프레임워크이다. 부트스트랩을 사용하면 미리 만들어둔 CSS와 javascript를 편하게 가져다 쓸 수 있다.


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

index.js


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>
);

index.js 에 부트스트랩 라이브러리를 임포트 해준다.

2. 리액트 부트스트랩

React Bootstrap | React Bootstrap

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

리액트 부트스트랩 사이트에서 원하는 컴포넌트를 고른다.

app.js


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;

app.js에 부트스트랩 코드를 넣는다.

부트스트랩의 네브바를 적용할 수 있다.

3. 네브바 링크 연결하기

app.js


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 컴포넌트를 사용할 때, 반드시 라우터 컴포넌트로 감싸야 한다.

index.js


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>
);

index.js를 BrowserRouter 로 감싼다.