React-Bootstrap 라이브러리

누군가 이미 만들어놓은 예제 코드로 간단하게 레이아웃 / 디자인할 수 있음

사용법

1. 사이트 방문

https://react-bootstrap.netlify.app/ 방문하기
Get Started를 눌러 간단 사용법 확인

2. 라이브러리 설치

바뀔 수 있으니 그냥 홈페이지에서 확인하는게 더 정확함

npm install react-bootstrap bootstrap 

이후 App.js에

{
  /* The following line can be included in your src/index.js or App.js file */
}
import 'bootstrap/dist/css/bootstrap.min.css';

import 해주거나,

index.html에

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css"
  integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7"
  crossorigin="anonymous"
/>

붙여넣어주면 설치는 끝.

3. 가져다 쓰기

간단하게 어떤 디자인인지 보여주고, 아래 코드를 가져다 붙여넣기만 하면 저 디자인을 쓸 수 있음.

import문은 꼭 써주자.
여러개 있다면

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

이렇게 묶어서 한줄로 쓰는 것도 가능.

간단하게 무언가 만드는데 굳이 이쁘게 디자인하지 않아도 되는 상황에 쓰기 좋다고 생각함.