[react 부트스트랩] 프로그래스 바 사용 설정 참고용

React에서 부트스트랩 프로그래스바를 사용하는 방법은 다음과 같습니다.

 

 

1. 설치

먼저 Bootstrap을 설치합니다. npm을 사용하는 경우 다음 명령어를 사용하여 설치할 수 있습니다:

npm install react-bootstrap bootstrap

 

 

2. Bootstrap CSS import

사용하고자 하는 React 컴포넌트에서 Bootstrap CSS를 가져옵니다. 다음과 같은 코드를 작성합니다:

import 'bootstrap/dist/css/bootstrap.min.css';

 

3. 컴포넌트를 표시하고자 하는 영역에 사용

Bootstrap 프로그래스바 컴포넌트를 사용하여 프로그래스바를 만듭니다. 다음과 같은 코드를 작성합니다:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import ProgressBar from 'react-bootstrap/ProgressBar';

function App() {
  return (
    <div>
      <ProgressBar now={60} />
    </div>
  );
}

export default App;

now 속성은 현재 진행 상태를 나타내며, 0에서 100 사이의 값을 가져야 합니다. 예를 들어, now={60}은 프로그래스바가 60% 완료되었음을 나타냅니다.