React 및 Tailwind가 있는 간단한 진행률 표시줄 구성 요소

안녕하세요 여러분,

최근에 한 기능에 대해 작업 중이었고 그 안에 진행률 표시줄을 구현해야 했습니다. 지금까지 나는 항상 진행률 표시줄을 두려워했습니다(이유: 알 수 없음 😂). 이전 프로젝트에서는 대부분 부트스트랩을 사용했고 부트스트랩에는 자체progress 구성 요소가 있기 때문에 진행률 표시줄을 혼자 만들 필요가 없었습니다.

하지만 다행스럽게도 현재 작업 중인 프로젝트는 Tailwind를 사용하고 있으므로 진행률 표시줄을 직접 만들어야 했습니다! 처음에는 이것이 매우 복잡하고 많은 상태와 모든 것을 처리해야 한다고 느꼈습니다. 그러나 그것은 결국 매우 작고 상당히 단순한 구성 요소가 됩니다.

이 문서에서는 이 쉽고 간단한 진행률 표시줄을 만드는 방법을 이해해 보겠습니다. 그래서 다음 번에 우리는 이것을 위해 라이브러리가 필요하지 않을 것입니다!

시작해봅시다 🚀

진행률 표시줄을 만들려면 두 부분만 필요합니다.
1- 전체 진행률 표시줄을 표시하려면 외부 div가 필요합니다.
2- 진행 상황을 보여주는 내부 div.

코드를 살펴보고 이것을 이해합시다! 진행률 표시줄 구성 요소는 다음과 같습니다.

const ProgressBar = ({ progressPercentage }) => {
    return (
        <div className='h-1 w-full bg-gray-300'>
            <div
                style={{ width: `${progressPercentage}%`}}
                className={`h-full ${
                    progressPercentage < 70 ? 'bg-red-600' : 'bg-green-600'}`}>
            </div>
        </div>
    );
};

이 4줄의 코드와 기본 진행률 표시줄 구성 요소가 준비되었습니다. 😇

코드에서 보면 외부 div가 전체 진행률 표시줄입니다. 총 3개의 클래스, height , width 및 background color 가 있습니다.

여기서 높이는 4px만 유지되지만 필요에 따라 변경할 수 있습니다. 여기서는 좀 더 일반화하기 위해 너비를 100%로 만들었습니다. 이로 인해 외부 구성 요소를 기반으로 진행률 표시줄의 너비를 제어할 수 있습니다. 이 div에 지정된 배경색은 진행률 표시줄의 빈 상태를 정의합니다. 따라서 우리는 tailwind 기본 색상에서 bg-gray-300를 사용했습니다.

이제 내부 너비가 이 진행률 표시줄의 실제 진행률을 나타내므로 진행률의 백분율로 전달된 값에 따라 너비를 유지해야 합니다. 따라서 이 div에 인라인 스타일 속성을 추가했으며 백분율은 너비 속성의 값으로 사용됩니다. 또한 이 내부 div에 100% 높이를 추가했습니다. 따라서 외부 div의 전체 높이를 소비합니다.

내 사용 사례에 따라 진행률이 70% 미만이면 진행률 표시줄을 빨간색으로 표시해야 하고 그렇지 않으면 녹색으로 표시해야 합니다. 조건부 스타일을 사용하여 간단히 이 작업을 수행할 수 있습니다. 이 div에 배경색 클래스를 조건부로 적용한 것을 볼 수 있습니다. 조건이 두 개 이상인 경우 변수를 사용하여 배경색 값을 가져오고 해당 클래스를 이 div에 적용할 수 있습니다.

이것은 진행률 표시줄의 최소 구조이며 요구 사항에 따라 계속해서 더 많은 기능을 추가할 수 있습니다. 하지만 이 기본 구조가 대부분의 요구 사항을 해결할 것이라고 생각합니다.

지금은 여기까지입니다. React 및 Tailwind 구성 요소를 만들기 위해 github repo을 만들었습니다. 이를 확인하고 관심이 있는 경우 자유롭게 구성 요소를 추가할 수 있습니다.

이 글을 읽어주셔서 감사합니다. 이에 대한 귀하의 생각을 알려주고 내 기사가 마음에 들면 buy me a coffee에서 저와 연결할 수도 있습니다.

즐거운 코딩하시고 계속 배우세요🙌