본문 바로가기
프론트엔드/React & React-Native

리액트 React | React-bootstrap: UI 컴포넌트 디자인

by YUNI Heo 2023. 5. 18.
반응형

 

✅ React-bootstrap

React-Bootstrap은 UI 컴포넌트 라이브러리이다.

  • Bootstrap 프레임워크의 디자인과 기능을 React 컴포넌트로 사용하는 것이다.

React-Bootstrap 공식 문서를 통하여 자세한 정보와 사용 방법을 확인할 수 있다.

 

💡 React-bootstrap 사용하기

프로젝트에 React-Bootstrap 라이브러리를 설치하여 사용한다.

  • 별도의 bootstrap.js 파일을 프로젝트에 추가하지 않아도 된다.

npm 명령어를 실행하여 React-Bootstrap과 Bootstrap을 설치한다.

npm install react-bootstrap bootstrap

index.js 파일에서 Bootstrap의 CSS를 import 한다.

  • 전체 애플리케이션에 Bootstrap의 스타일을 적용할 수 있다.
import 'bootstrap/dist/css/bootstrap.css';

bootstrap.com에서 원하는 UI 컴포넌트 가져와서 사용한다.

반응형