일반 Bootstrap과 React-Bootstrap의 차이
React-Bootstrap은 일반 Bootstrap을 기반으로 만들어졌지만 코드가 더 간소화 되어있다.
React-Bootstrap은 className=''형식을 모두 제거하고 자체 element이름을 만들어 코드를 더 간편하게 작성할 수 있다. React-Strap은 클래스형 컴포넌트에 사용되고 React-Bootstrap은 함수형 컴포넌트에 사용된다.
참고한 react-bootstrap 사용법 가이드 : https://react-bootstrap.github.io/getting-started/introduction/
React-Bootstrap 라이브러리를 리액트 프로젝트에 설치한다
cdn 방식으로 부트스트랩 파일을 가지고 와준다.
CDN 방식이란?
CDN은 Content Delivery Network(콘텐츠 전송 네트워크)의 약자이다.
CDN은 사용자 위치, 콘텐츠 원본 서버, 에지 서버 위치를 기준으로 콘텐츠(웹페이지, 동영상, 이미지)를 최종 사용자에게 전송할 수 있는 분산 노드로 구성된 네트워크이다.
이랙트 프로젝트의 public > index.html파일의 헤더영역에 삽입해준다.
사용하고자 하는 컴포넌트를 프로젝트에 import 해온다
import Button from 'react-bootstrap/Button'
-> 'export default Button'한 파일에서 한가지의 요소만 import 해올때
import { Button } from 'react-bootstrap'
-> 'export { Button , ... }'한 파일에서 여러가지의 요소를 import 해올때
적용 예시
프로젝트에 적용하고 싶은 nav 컴포넌트의 코드를 https://react-bootstrap.netlify.app/components/navbar/ 에서 서치해 코드를 가지고온다.
import { Navbar, Container, Nav } from 'react-bootstrap';
필요한 요소들은 각각 import 해주고,
<Nav.Link>
<Link to='/' style={{ color: 'white', textDecoration: 'none' }}>
Home
</Link>
</Nav.Link>css등을 추가적으로 변경해주고 싶다면 inline에 스타일을 적용해준다.(inline의 스타일이 react-bootstrap의 스타일보다 우선적으로 적용된다)
