[React] 프로그레스바 꾸미기(React Circular Progressbar)

작은 프로젝트를 진행하는데 프로그레스 바 그리는 것이 필요하기에 어떤 걸 사용할까 찾아보다 보니 원형 프로그레스 바 예쁜 것이 있어서 적용시켜보았습니다. 적용하는데 어려움도 없고 바로 사용할 수 있으니 참고하시기 바랍니다.

 

라이브러리 이름은 React circular progressbar 입니다.

 

설치 방법은 아래와 같이 명령어 먼저 작성합니다.

 

yarn으로 설치 시

yarn add react-circular-progressbar

 

npm으로 설치 시

npm install --save react-circular-progressbar

 

그리고 난 다음에 

import { CircularProgressbar } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

사용할 페이지에 위와 같이 import를 해준 다음에 

<CircularProgressbar value={60} text={`60%`} />;

위와 같이 하드코딩을 하여 적용시켜보면 프로그레스 바가 적용됨을 확인할 수 있습니다.

 

 

위 라이브러리의 좀 더 자세한 기능을 알고 싶을 경우 https://www.npmjs.com/package/react-circular-progressbar 페이지에 접속하여 확인하면 됩니다.