React x Bootstrap

React Bootstrap 라이브러리

React 프로젝트에서 Bootstrap 라이브러리를 사용하는 방법은 2 가지가 있다.

bootstrap 라이브러리 
(그냥 Bootstrap)

react-bootstrap 라이브러리 
(React 용 Bootstrap)

bootstrap vs react-bootstrap

Bootstrap

•

Bootstrap은 원래 jQuery와 함께 사용되는 CSS 프레임워크로, jQuery 기반의 JavaScript 컴포넌트를 제공합니다.

•

React 프로젝트에서 Bootstrap을 사용하려면 Bootstrap CSS 파일을 프로젝트에 추가하고, 필요한 경우 jQuery와 Popper.js도 추가해야 합니다.

•

Bootstrap의 JavaScript 기능은 React와 어울리지 않을 수 있습니다. 특히, React는 가상 DOM을 사용하며, jQuery 기반의 DOM 조작은 React의 철학과 다를 수 있습니다.

import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="container">
      <h1>Hello, Bootstrap!</h1>
      <button className="btn btn-primary">Click me</button>
    </div>
  );
}

export default App;
JavaScript
복사

react-bootstrap 사용:

•

react-bootstrap은 Bootstrap의 React 구현을 제공하는 라이브러리입니다. 이는 React 컴포넌트로 구성되어 있어 React와의 통합이 더욱 용이합니다.

•

react-bootstrap을 사용하면 Bootstrap의 기능을 React 스타일로 사용할 수 있습니다. 예를 들어, Bootstrap의 "Alert" 컴포넌트를 react-bootstrap을 사용하여 React 스타일로 구현할 수 있습니다.

•

react-bootstrap은 Bootstrap의 스타일을 가져오기 위해 Bootstrap CSS 파일을 추가하는 대신, Bootstrap의 스타일을 직접 React 컴포넌트로 구현하여 사용합니다.

import React from 'react';
import { Container, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <Container>
      <h1>Hello, Bootstrap!</h1>
      <Button variant="primary">Click me</Button>
    </Container>
  );
}

export default App;
JavaScript
복사

Bootstrap

Bootstrap은 웹 개발을 위한 오픈 소스 프론트엔드 프레임워크로, 트위터에서 개발하였습니다. 주로 HTML, CSS, JavaScript를 이용하여 빠르고 쉽게 모바일 우선의 반응형 웹 페이지를 구축할 수 있도록 도와주는 도구와 디자인 모음입니다.

React 에서 Bootstrap 사용하는 방법

React 프로젝트 생성

Bootstrap 라이브러리 설치

Bootstrap import

클래스 속성 및 상태값을 이용하여 스타일 적용

React 프로젝트 생성

npx create-react-app bootstrap-react-app
Shell
복사

Bootstrap 라이브러리 설치

cd bootstrap-react-app
npm install bootstrap@5
Shell
복사

Bootstrap import

•

src/index.css

/* src/index.css */

/* 기존 스타일 유지 */

/* Bootstrap 5 스타일 추가 */
@import "~bootstrap/dist/css/bootstrap.min.css";
CSS
복사

•

src/App.js

import 'bootstrap/dist/css/bootstrap.min.css';
JavaScript
복사

클래스 속성 및 상태값을 이용하여 스타일 적용

import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="container">
      <h1>Hello, Bootstrap!</h1>
      <button className="btn btn-primary">Click me</button>
    </div>
  );
}

export default App;
HTML
복사

실행 결과

react-bootstrap

React 프로젝트에서 Bootstrap 스타일을 사용할 수 있도록 도와주는 라이브러리

react-bootstrap은 Bootstrap의 기능을 React 컴포넌트로 래핑하여 제공합니다. 이를 통해 React 기반의 프로젝트에서도 Bootstrap의 강력한 스타일 및 구성 요소를 활용할 수 있습니다.

React Bootstrap | React Bootstrap

https://react-bootstrap.netlify.app/

주요 특징 및 장점

React 컴포넌트로 구현된 Bootstrap: Bootstrap의 다양한 구성 요소를 React 컴포넌트로 사용할 수 있습니다.

React 생태계와의 통합: React 프로젝트에서 자연스럽게 사용할 수 있도록 React 생태계와 통합되어 있습니다.

모듈성 및 커스터마이징: Bootstrap 스타일을 모듈로 사용하면서 필요한 경우 각 구성 요소를 커스터마이징할 수 있습니다.

유지보수 용이성: Bootstrap 업데이트가 있을 때, 해당 업데이트를 쉽게 통합하여 프로젝트를 최신 상태로 유지할 수 있습니다.

예를 들어, Button, Navbar, Modal과 같은 Bootstrap의 구성 요소를 react-bootstrap에서는 다음과 같이 React 컴포넌트로 사용할 수 있습니다.

bootstrap vs react-bootstrap

https://react-bootstrap.netlify.app/docs/getting-started/why-react-bootstrap

React-Bootstrap은 React를 사용하여 Bootstrap 구성 요소를 완전히 다시 구현한 것입니다. 또는 jQuery 에 종속되지 bootstrap.js 않습니다 . React 설정과 React-Bootstrap이 설치되어 있다면 필요한 모든 것을 갖춘 것입니다.

jQuery를 사용하는 메서드와 이벤트는 DOM을 직접 조작하여 명령적으로 수행됩니다. 대조적으로 React는 상태 업데이트를 사용하여 가상 DOM을 업데이트합니다. 이런 방식으로 React-Bootstrap은 Bootstrap 기능을 React의 가상 DOM에 통합하여 보다 안정적인 솔루션을 제공합니다.

react-bootstrap 사용 방법

React 프로젝트 생성

react-bootstrap 라이브러리 설치

react-bootstrap 컴포넌트 import

react-bootstrap의 React 컴포넌트를 사용

React 프로젝트 생성

npx create-react-app react-bootstrap-app
Shell
복사

react-bootstrap 라이브러리 설치

npm install react-bootstrap bootstrap
Shell
복사

react-bootstrap 컴포넌트 import

import { Container, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
JavaScript
복사

react-bootstrap의 React 컴포넌트를 사용

import React from 'react';
import { Container, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <Container>
      <h1>Hello, Bootstrap!</h1>
      <Button variant="primary">Click me</Button>
    </Container>
  );
}

export default App;
JavaScript
복사

실행 결과

더 자세한 가이드와 개발 문서는 아래 링크에서 확인할 수 있습니다.

React Bootstrap | React Bootstrap

https://react-bootstrap.netlify.app/