React에서 Bootstrap 설치 및 사용 정리

📌 React에서 Bootstrap 설치 및 사용 정리

---

✅ 1. 관련 라이브러리 설치

Bootstrap을 사용하려면 먼저 react-bootstrap과 bootstrap을 설치해야 해.

cd reactapp  # 프로젝트 폴더로 이동
npm install bootstrap react-bootstrap

📌 설명:

• bootstrap → 기본 스타일 및 CSS
• react-bootstrap → React에서 Bootstrap 컴포넌트를 쉽게 사용 가능

---

✅ 2. import로 Bootstrap 스타일 추가

설치한 Bootstrap 스타일을 import해야 적용돼.

🔹 src/index.js 또는 src/App.js에서 추가:

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

📌 설명:

• Bootstrap의 CSS를 불러와서 모든 컴포넌트에서 사용할 수 있도록 설정.

---

✅ 3. Bootstrap 컴포넌트 사용

Bootstrap 컴포넌트는 react-bootstrap에서 제공하는 것들을 import해서 사용하면 돼.

🎯 예제: Alert 컴포넌트 사용

import { Alert } from 'react-bootstrap';

function MyComponent() {
  return (
    <Alert variant="success">
      Bootstrap이 정상적으로 적용되었습니다!
    </Alert>
  );
}

export default MyComponent;

📌 설명:

• Alert 컴포넌트를 react-bootstrap에서 가져와 사용.
• variant="success" → 초록색 알림 메시지 표시.

---

✅ 4. 더 많은 컴포넌트 사용법 참고

Bootstrap의 다양한 컴포넌트(버튼, 카드, 모달 등)를 사용하려면 공식 문서를 참고하면 돼.

📌 참조 사이트:
🔗 React-Bootstrap 공식 문서

---

🎯 최종 정리

1️⃣ Bootstrap 설치

d:
cd reactapp
npm install bootstrap react-bootstrap

파일이 들어 있는 드라이브한다(e.g. D드라이브, C드라이브 등등).

2️⃣ 스타일 불러오기 (src/index.js 또는 src/App.js)

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

3️⃣ Bootstrap 컴포넌트 사용

import { Button } from 'react-bootstrap';
<Button variant="primary">클릭하세요</Button>