<progress>

소개

브라우저 내장 <progress> 컴포넌트를 사용하면 진행 표시기를 렌더링할 수 있어요.

<progress value={0.5} />

<progress>는 파일 업로드, 데이터 로딩, 작업 완료율 등을 시각적으로 표시하는 데 사용돼요. 사용자에게 작업이 얼마나 진행되었는지 직관적으로 보여줄 수 있어요!

---

목차

• 레퍼런스
  • <progress>
• 사용법
  • 진행 표시기 제어하기

---

레퍼런스

<progress>

진행 표시기를 표시하려면, 브라우저 내장 <progress> 컴포넌트를 렌더링하세요.

<progress value={0.5} />

아래에서 더 많은 예시를 확인해보세요.

Props

<progress>는 모든 공통 요소 props를 지원해요.

추가로, <progress>는 다음 props를 지원해요:

• max: 숫자예요. value의 최대값을 지정해요. 기본값은 1이에요.
• value: 0과 max 사이의 숫자, 또는 불확정 진행의 경우 null이에요. 얼마나 완료되었는지를 지정해요.

---

사용법

진행 표시기 제어하기

진행 표시기를 표시하려면, <progress> 컴포넌트를 렌더링하세요. 지정한 max 값과 0 사이의 숫자 value를 전달할 수 있어요. max 값을 전달하지 않으면, 기본적으로 1로 간주될 거예요.

작업이 진행 중이 아니라면, value={null}을 전달해서 진행 표시기를 불확정 상태로 만들 수 있어요.

export default function App() {
  return (
    <>
      <progress value={0} />
      <progress value={0.5} />
      <progress value={0.7} />
      <progress value={75} max={100} />
      <progress value={1} />
      <progress value={null} />
    </>
  );
}

progress { display: block; }

위 예시를 보면:

• value={0}: 0% 완료 (시작 상태)
• value={0.5}: 50% 완료 (기본 max가 1이므로)
• value={0.7}: 70% 완료
• value={75} max={100}: 75% 완료 (100 중 75)
• value={1}: 100% 완료
• value={null}: 불확정 상태 (진행률을 알 수 없을 때)

불확정 상태(value={null})는 작업이 진행 중이지만 정확히 얼마나 완료되었는지 알 수 없을 때 유용해요. 예를 들어, 서버에서 데이터를 다운로드하는데 전체 크기를 모를 때 사용할 수 있어요.

실제 사용 예시:

function FileUpload({ uploadProgress }) {
  return (
    <div>
      <p>파일 업로드 중...</p>
      <progress value={uploadProgress} max={100} />
      <p>{uploadProgress}% 완료</p>
    </div>
  );
}

이렇게 하면 사용자가 업로드 진행 상황을 시각적으로 확인할 수 있어요!

---

사이트맵

모든 문서 페이지 개요