REACT_reactstrap Progress

Progress 사용하기 

: Progress 패키지는 전체 작업에 대한 현재 진행 상태를 표현해준다 

진행 바 내부에 문자열을 넣을 수 있고, 색상을 적용할 수도 있다

 

- R052_ReactstrapProgress.js

import React, { Component } from 'react';
import { Progress } from 'reactstrap';


class R052_ReactstrapProgress extends Component {
    constructor (props) {
        super(props);
        this.state = {progress:0}
    }

    componentDidMount() { this.progress()}

    progress = () => {
        if(this.state.progress !== 100) {
            setTimeout(function(){
                this.setState({progress: this.state.progress + 1});
                this.progress();
            }.bind(this), 100);
        }
    }

    render() {
        return(
            <>
            <Progress color="info" value={this.state.progress}>%</Progress><br/>
            <Progress multi>
                <Progress bar color="warning" value="25">25%</Progress>
                <Progress bar color="success" value="35">wow</Progress>
                <Progress bar value="15">Meh</Progress>
                <Progress bar color="danger" value="20">LOOK OUT!</Progress>
            </Progress>
            </>
        )
    }
}
export default R052_ReactstrapProgress;

 

- App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import Progress from './R052_ReactstrapProgress'
import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <Progress/>
    </div>
  );
}

export default App;

 

결과

바가 변한다