[React] 5주차 - react-bootstrap
react-bootstrap란?
부트스트랩(bootstrap)은 오픈소스 프론트엔드 프레임워크이다. 웹사이트를 쉽게 만들 수 있도록 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 제공하고 있다.
리액트에서 부트스트랩을 사용하는 경로는 react-bootstrap, reactstrap 두 가지가 있는데, 본 스터디에서는 react-bootstrap을 사용한다.
react-bootstrap은 기존의 부트스트랩을 리액트 스타일의 컴포넌트로 압축하여 코드가 간단해진다는 장점이 있다.
시작하기
react-bootstrap 패키지 설치
npm install react-bootstrap bootstrap
css 스타일시트 추가
최상단의 루트파일인 src/index.js 또는 App.js 파일에 코드를 추가하면 부트스트랩의 스타일을 적용할 수 있다.
import "bootstrap/dist/css/bootstrap.min.css";
여러 가지 컴포넌트 사용하기
공식 문서에서 button, alert, badge, navbar 등 다양한 컴포넌트 활용 예시를 확인할 수 있다. 예를 들어 Button을 추가하려고 한다면 하단의 절차를 따른다.
원하는 컴포넌트 불러오기
버튼을 넣으려고 하는 컴포넌트 파일 상단에 코드를 추가한다.
import Button from "react-bootstrap/Button";
// 또는
import { Button } from "react-bootstrap";
컴포넌트 사용하기
<Button> 태그를 통해 Button 컴포넌트를 사용한다.
App.js
import React from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button } from "react-bootstrap"
function App() {
return (
<div className="App">
<Button>Hello</Button>
</div>
);
}
export default App;
실행 결과는 다음과 같다.
다양한 옵션 활용하기
컴포넌트 별로 다양한 옵션이 제공되고 있다. Button의 경우에는 아래와 같다.
<Button variant="info">Hello</Button>
variant="info" 옵션을 추가해주면 버튼 디자인이 바뀌는 것을 확인할 수 있다.
react-bootstrap으로 인프런 사이트 클론 코딩하기
공식 문서의 컴포넌트 활용 예시를 참고하여 여러 사이트의 디자인과 유사하게 구현할 수 있다.
인프런
react-bootstrap으로 구현한 화면
또한, Modal을 통해 팝업창을 구현할 수 있다.
인프런
react-bootstrap으로 구현한 화면
Author And Source
이 문제에 관하여([React] 5주차 - react-bootstrap), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@smjan27/React-Study-5저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)