progress

progress는 빌트인 엘리멘트로써 진행 표시줄을 보여주기 위해 사용되기도 하고,
진행 표시줄의 상태, 즉 차 있는 정도를 제어하는데 사용된다.
이를 사용하기 위해
progress 태그를 작성해주고, 남은 시간을 나타내는데 사용하기 위해
remainingTime state를 작성해준다.

그 후 setInterval 함수로 10밀리세컨드마다 작동하는 함수를 만들어준다

다음으로 progress 태그에 value로 remainingTime을 연결해준다

진행 표시줄의 찬 정도를 자동으로 계산되기 위해 max 값을 설정해야 한다

그 후 무한루프를 방지하기 위해 useEffect로 setInterval을 감싸주고

cleanup 함수를 작성해주면

이러한 progress 를 확인할 수 있다.