[React] React bootstrap 적용하기 (리액트 부트스트랩)

류넹·2025년 7월 16일

Front-End

목록 보기

8/10

1. 부트스트랩 설치

npm install react-bootstrap bootstrap

부트스트랩 아이콘 설치

npm i bootstrap-icons

2. App.js에 부트스트랩 등록

import { RouterProvider } from "react-router-dom"
import root from "./router/root"
// 부트스트랩 사용
import 'bootstrap/dist/css/bootstrap.min.css';
// 부트스트랩 아이콘
import 'bootstrap-icons/font/bootstrap-icons.css'

function App() {
  return (
    <RouterProvider router={root}/>
  );
}

export default App;

3. 사용 예시

Main.js

import { Container, Button, Col, Row } from "react-bootstrap";

const MainPage = () => {

    return (
        <Container>
            <Row>
                <Col>
                    <div className="mt-3 mb-3">메인페이지</div>
                    <Button type="button">버튼</Button>
                </Col>
            </Row>
        </Container>
    )
}

export default MainPage;

참고) root.js

import { Suspense, lazy } from "react";
import testRouter from "./testRouter";

import { createBrowserRouter } from "react-router-dom";

const Loading = <div>Loading....</div>

const Main = lazy(() => import("../page/MainPage"))
const TestIndex = lazy(() => import("../page/test/IndexPage"))

const root = createBrowserRouter([

    {
        path: "",
        element: <Suspense fallback={Loading}><Main /></Suspense>
    },
    {
        path: "test",
        element: <Suspense fallback={Loading}><TestIndex /></Suspense>,
        children: testRouter()
    }
])

export default root;