React로 접근 가능한 진행률 표시줄을 만드는 방법

진행률 표시줄은 달성할 목표를 제공하기 때문에 사용자 참여에 좋습니다. 리소스를 기다리는 웹 페이지를 응시하는 대신 진행률 표시줄이 채워지는 것을 볼 수 있습니다. 진행률 표시줄은 시력이 있는 사용자에게만 제한되어서는 안 됩니다. 모든 사람이 진행률 표시줄을 쉽게 이해할 수 있어야 합니다.

그렇다면 React로 접근 가능한 진행률 표시줄을 어떻게 구축할 수 있을까요?

트랙 이름이 있는 cd를 mp3로 추출

MAKEUSEOF 오늘의 비디오

진행률 표시줄 구성 요소 만들기

ProgressBar.js라는 새 구성 요소를 만들고 다음 코드를 추가합니다.

const ProgressBar = ({progress}) => { 
    return ( 
        <div> 
            <div role="progressbar" 
                 aria-valuenow={progress} 
                 aria-valuemin={0} 
                 aria-valuemax={100}> 
                <span>{`${progress}%`}</span> 
            </div> 
        </div> 
    ); 
}; 
   
export default ProgressBar;

첫 번째 div 요소는 컨테이너이고 두 번째 div는 실제 진행률 표시줄입니다. span 요소는 진행률 표시줄 백분율을 보유합니다.

접근성을 위해 두 번째 div에는 다음과 같은 속성이 있습니다.

진행률 표시줄의 역할.
aria-valuenow를 사용하여 진행률 표시줄의 현재 값을 나타냅니다.
aria-valuemin은 진행률 표시줄의 최소값을 나타냅니다.
aria-valuemax는 진행률 표시줄의 최대값을 나타냅니다.

HTML은 기본적으로 이러한 값을 사용하므로 진행률 표시줄의 최대값과 최소값이 0과 100이면 aria-valuemin 및 aria-valuemax 속성이 필요하지 않습니다.

진행률 표시줄 스타일 지정

인라인 스타일 또는 styled-components와 같은 CSS-in-JS 라이브러리 . 이 두 가지 접근 방식 모두 구성 요소에서 CSS로 소품을 전달하는 간단한 방법을 제공합니다.

램은 2기가면 충분합니다

진행률 표시줄의 너비가 props로 전달된 진행률 값에 따라 달라지기 때문에 이 기능이 필요합니다.

다음 인라인 스타일을 사용할 수 있습니다.

const container = { 
    height: 20, 
    width: "100%", 
    backgroundColor: "#fff", 
    borderRadius: 50, 
    margin: 50 
} 
  
const bar = { 
    height: "100%", 
    width: `${progress}%`, 
    backgroundColor: "#90CAF9", 
    borderRadius: "inherit", 
} 
  
const label = { 
    padding: "1rem", 
    color: "#000000", 
}

아래와 같이 스타일을 포함하도록 구성 요소의 반환 부분을 수정합니다.

<div style={container}> 
    <div style={bar} role="progressbar" 
        aria-valuenow={progress} 
        aria-valuemin={0} 
        aria-valuemax={100}> 
        <span style={label} >{`${progress}%`}</span> 
    </div> 
</div>

다음과 같이 진행률 표시줄을 렌더링합니다.

<ProgressBar progress={50}/>

그러면 50%가 완료된 진행률 표시줄이 표시됩니다.

React에서 컴포넌트 빌드하기

이제 애플리케이션의 어느 부분에서나 재사용할 수 있는 백분율로 액세스 가능한 진행률 표시줄을 만들 수 있습니다. React를 사용하면 이와 같은 독립적인 UI 구성 요소를 만들고 복잡한 애플리케이션의 빌딩 블록으로 사용할 수 있습니다.