React(6) React bootstrap 사용하기

목차

1. bootstrap 설치법

2. bootstrap 사용하는 방법

 

 

---

• 이제 기본적인 리액트 문법들과, build까지 해보았으니, 새로운 파일을 만들어서, bootstrap으로 작업하려고한다.

bootstrap 이란 :
부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크이다.
각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓았다.
부트스트랩에 열광하는 이유는 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘 등의 자잘한 것 뿐만이 아니라, 드롭다운 메뉴, 버튼, 탭, 리스트, 메뉴바, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등의 웹 페이지에서 많이 쓰이는 요소를 거의 전부 내장하고 있고, 입맛에 따라 재사용 할 수 있기 때문이다.

• 작업하려는 폴더에, 다시 오른쪽 클릭후 -> 서비스 -> 폴더에서 새로운 터미널 열기 를 클릭한다.
• 나온 터미널에, npx create-react-app shoppingmall  을 친다.
• shoppingmall 폴더가 생성된 후, 이제 본격적으로 시작해보자.
• (알수도 있는 팁 : 터미널에서  ctrl + C 를 누르면, 터미널 취소)

---

bootstrap 설치법

• 구글에, react bootstrap를 검색하면 나오는 페이지를 접속한다. https://react-bootstrap.netlify.app/

React Bootstrap | React Bootstrap

• get start를 눌러 들어가게되면, npm install react-bootstrap bootstrap이라는 코드를 입력하여 다운로드하라고 나와있다.
  터미널에 타이핑하여 설치하도록 하자.
• 또한, 온전히 사용하려면 CSS파일도 다운받으라고 나와있는데, 
  CDN방식으로, app.js 에 import 'bootstrap/dist/css/bootstrap.min.css';를 입력하든지
  index.html 에 
  <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
  integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  crossorigin="anonymous"
  />
  을 입력하면 될 것 같다.

• 이제 react-bootstrap 사이트에서 UI 복붙이 가능해졌다!

---

bootstrap 사용하는 방법

• 예를 들어, 버튼이 필요하다면, 왼쪽의 Componets탭의 Buttons을 클릭하여, 사용법을 익히도록하자

• 대충 보건데,
  import Button from 'react-bootstrap/Button'; 로 import하고,
  <Button variant="primary">Primary</Button>로 사용하면 될것 같다!

정상작동!

• 또, 예를 들어, Navbar를 작성하고싶다면, import {Button, Navbar} from 'react-bootstrap/Button'; 로,
  윗 부분에 import내용을 추가수정하고, 관련된 Navbar를 추가하면된다!

---

참고 자료 : 

bootstrap 이란 : https://ict-nroo.tistory.com/21

[Bootstrap] 부트스트랩이란?