<progress>

01무엇

<progress>는 작업이 얼마나 끝났는지 보여 주는 브라우저 기본 진행 표시줄이다.

value가 진행량, max가 최댓값이다. max를 생략하면 기본값은 1이다.

<progress value={0.5} /> {/* 50% */}
<progress value={75} max={100} /> {/* 75% */}

02무슨 일이 일어나나

두 가지 상태가 있다. **확정(determinate)**은 value에 숫자를 준 경우로, 0과 max 사이 값으로 정확한 완료 정도를 그린다. **미확정(indeterminate)**은 value={null}을 준 경우로, 진행 중이지만 얼마나 남았는지 모를 때 쓴다. 이때 브라우저는 흐르는 애니메이션 같은 걸 보여 준다.

value와 max는 비율로만 해석된다. value={0.5}(max 기본 1)과 value={50} max={100}은 똑같이 50%다. 표시줄은 기본이 인라인 요소라, 폭을 잡으려면 CSS로 display: block을 준다.

03사용법

확정 표시줄은 상태 값을 그대로 value에 넣는다.

export function Uploading({ percent }: { percent: number }) {
  return <progress value={percent} max={100} />
}

미확정 표시줄은 진행량을 모를 때 value={null}로 둔다.

{isLoading ? <progress value={null} /> : <progress value={done} max={100} />}

04실무 예시

파일 업로드처럼 진행량이 숫자로 들어오는 상황이다. 진행률 상태를 value에 연결하고, 접근성을 위해 라벨을 곁들인다.

import { useState } from 'react'

export function UploadBar() {
  const [percent, setPercent] = useState(0)
  return (
    <label>
      업로드 {percent}%
      <progress value={percent} max={100} />
    </label>
  )
}

05왜 중요한가

업로드, 다운로드, 단계형 폼 같은 곳에서 진행 상태를 보여 줄 때 쓴다. 직접 막대를 그리는 대신 브라우저 기본 요소를 쓰면 접근성(스크린 리더가 진행률을 읽음)이 공짜로 따라온다. 쓰임이 좁고 API도 value/max 둘뿐이라 익힐 게 많지 않다. 진행량을 모를 땐 value={null}을 쓴다는 점만 기억하면 된다.

Reference