๋ธŒ๋ผ์šฐ์ € ๋‚ด์žฅ ์ปดํฌ๋„ŒํŠธ <progress>๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ง„ํ–‰๋ฅ  ํ‘œ์‹œ๊ธฐ๋ฅผ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<progress value={0.5} />

๋ ˆํผ๋Ÿฐ์Šค

<progress>

์ง„ํ–‰๋ฅ  ํ‘œ์‹œ๊ธฐ๋ฅผ ํ‘œ์‹œํ•˜๋ ค๋ฉด ๋ธŒ๋ผ์šฐ์ € ๋‚ด์žฅ ์ปดํฌ๋„ŒํŠธ <progress>๋ฅผ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.

<progress value={0.5} />

์•„๋ž˜์—์„œ ๋” ๋งŽ์€ ์˜ˆ์‹œ๋ฅผ ํ™•์ธํ•˜์„ธ์š”.

Props

<progress>๋Š” ๋ชจ๋“  ์ผ๋ฐ˜์ ์ธ ์—˜๋ฆฌ๋จผํŠธ props๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

๋˜ํ•œ <progress>๋Š” ์ด๋Ÿฌํ•œ props๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

  • max: ์ˆซ์ž. ์ตœ๋Œ€ value๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ๊ฐ’์€ 1์ž…๋‹ˆ๋‹ค.

  • value: 0์—์„œ ์ตœ๋Œ€ ์‚ฌ์ด์˜ ์ˆซ์ž ๋˜๋Š” ๊ฒฐ์ •๋˜์ง€ ์•Š์€ ์ƒํƒœ์ธ ๊ฒฝ์šฐ null์ž…๋‹ˆ๋‹ค.


์‚ฌ์šฉ๋ฒ•

์ง„ํ–‰๋ฅ  ํ‘œ์‹œ๊ธฐ ์ œ์–ด

์ง„ํ–‰๋ฅ  ํ‘œ์‹œ๊ธฐ๋ฅผ ํ‘œ์‹œํ•˜๋ ค๋ฉด <progress> ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค. 0์—์„œ ์ง€์ •ํ•œ ์ตœ๋Œ€ ๊ฐ’ ์‚ฌ์ด์˜ ์ˆซ์ž value๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ตœ๋Œ€๊ฐ’์„ ์ „๋‹ฌํ•˜์ง€ ์•Š์œผ๋ฉด ๊ธฐ๋ณธ์ ์œผ๋กœ 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} />
    </>
  );
}