React은 다음과 같이 구성되어 있습니다.

• React란?
• React 컴포넌트 만들기
• useState에 대해
• React로 간단한 구구단게임 만들기!
• props가 번거로울 때 Context API를 사용해보자
• React에서 Bootstrap사용하기
• React 페이지 이동시 최상단 스크롤 방법
• React - lazy, Suspense에 대해
• Link와 useNavigate
• useEffect 정리
• Context API 란?
• React에서 Bootstrap 사용하기
• useMemo 사용
• useTransition에 대해서
• useDeferredValue 사용법

React에서 Bootstrap사용하기

React에서 Bootstrap을 사용하는 방법을 알아보겠습니다.

일단 Bootstrap을 설치합니다. 터미널에 다음과 같이 입력하여 설치합니다.

npm install react-bootstrap bootstrap

그 다음 최상단 파일인 index.js 또는 App.js에 css를 import해주면됩니다.

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

또는 index.html파일에 다음을 link시켜주면됩니다.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

React에서 Bootstrap을 사용할 때 주의할 점은 이후에 부트스트랩 컴포넌트를 복사붙여넣기하고 바로 확인해보면 에러가 발생합니다. 추가적으로 해야할 것은 붙여넣은 컴포넌트를 따로 import해주어야한다는 것입니다.

예시 :

import { Navbar, Container, Nav, NavDropdown } from "react-bootstrap";

이렇게 import하면 정상적으로 사용이 가능합니다.

End!