my personal blog에 원래 게시됨

며칠 전 매우 인기 있는 UI 라이브러리를 사용하여 React 프로젝트 중 하나를 작업하는 동안 한 가지 문제를 발견했습니다. Progress Bar 구성 요소의 스타일을 변경해야 했습니다. 그러나 몇 시간 동안 그것과 씨름하고 완전한 절망에 빠진 후(문서에 쓰여진 대로 작동하지 않는 이유???) 처음부터 진행률 표시줄 구성 요소를 만들기로 결정했습니다. 여기 내가 어떻게 만들었는지.

1. progress-bar.component.js 파일 생성

import React from "react";

const ProgressBar = (props) => {
  const { bgcolor, completed } = props;
  return (
    <div>
      <div>
        <span>{`${completed}%`}</span>
      </div>
    </div>
  );
};

export default ProgressBar;

기본적으로 구성 요소는 두 부분으로 구성됩니다.

기본 상위 div 컨테이너 - 전체 막대를 나타냅니다

.

하위 div - 완성된 백분율 숫자를 표시할 범위가 있는 막대의 완성된 부분입니다.

사용자 지정 진행률 표시줄 구성 요소는 두 개의 소품만 받습니다.

bgcolor - 막대의 완성된 부분의 배경색

완료됨 - 0에서 100 사이의 숫자

2. 스타일링 추가

이 튜토리얼을 위해, 스타일링을 위해 순수 인라인 CSS를 사용하겠습니다. 또 다른 옵션은 styled-components 라이브러리를 사용하는 것이지만 간단하게 유지하겠습니다.

const ProgressBar = (props) => {
  const { bgcolor, completed } = props;

  const containerStyles = {
    height: 20,
    width: '100%',
    backgroundColor: "#e0e0de",
    borderRadius: 50,
    margin: 50
  }

  const fillerStyles = {
    height: '100%',
    width: `${completed}%`,
    backgroundColor: bgcolor,
    borderRadius: 'inherit',
    textAlign: 'right'
  }

  const labelStyles = {
    padding: 5,
    color: 'white',
    fontWeight: 'bold'
  }

  return (
    <div style={containerStyles}>
      <div style={fillerStyles}>
        <span style={labelStyles}>{`${completed}%`}</span>
      </div>
    </div>
  );
};

export default ProgressBar;

멋진 것은 없습니다. 대부분 배경색과 테두리 반경입니다.

우리가 개발한 것을 테스트해 봅시다.

import React from "react";
import "./App.css";
import ProgressBar from "./progress-bar.component";

const testData = [
  { bgcolor: "#6a1b9a", completed: 60 },
  { bgcolor: "#00695c", completed: 30 },
  { bgcolor: "#ef6c00", completed: 53 },
];

function App() {
  return (
    <div className="App">
      {testData.map((item, idx) => (
        <ProgressBar key={idx} bgcolor={item.bgcolor} completed={item.completed} />
      ))}
    </div>
  );
}

export default App;

앱을 실행하고 브라우저에 무엇이 있는지 확인합니다.



그리고 그게 다야! 간단한 Progress Bar React 컴포넌트가 준비되었습니다!

보너스. 애니메이션을 추가합니다.

실제로 진행률 표시줄 이동을 애니메이션으로 표시하려면 필러 스타일에 한 줄만 추가하면 됩니다.

const fillerStyles = {
    ...
    transition: 'width 1s ease-in-out',
    ...
  }

실제 애니메이션을 시연하기 위해 2초마다 완성된 소품 값을 무작위로 생성하는 함수를 만들 것입니다. 이 함수는 useEffect 후크 안에 배치됩니다.

function App() {
  const [completed, setCompleted] = useState(0);

  useEffect(() => {
    setInterval(() => setCompleted(Math.floor(Math.random() * 100) + 1), 2000);
  }, []);

  return (
    <div className="App">
      <ProgressBar bgcolor={"#6a1b9a"} completed={completed} />
    </div>
  );
}

이것이 최종 결과입니다.

결론

그리고 그게 다야! 이 짧은 블로그 게시물에서는 맞춤 진행률 표시줄 React 구성 요소를 만드는 단계별 프로세스를 설명했습니다. 이 구성 요소는 완전히 사용자 정의할 수 있으므로 프로젝트 요구 사항에 따라 스타일과 기능을 추가할 수 있습니다.

구성 요소의 전체 소스 코드는 this GitHub repository에서 사용할 수 있습니다.

또한 이 구성 요소(TypeScript 지원 포함)를 npm package 로 사용할 수 있습니다.