progress bar

const [position, setPosition] = useState(0);

 function onScroll() {
    setPosition(window.scrollY);
 }
 
   useEffect(() => {
    window.addEventListener("scroll", scrollHandler);
     // window에 아예 설치를 해버렸기 때문에 언마운트될때도 작동 안하게 삭제해줘야함 -> return
    return () => {
      window.removeEventListener("scroll", scrollHandler);
      // 언마운트 되기 직전에 이 이벤트가 제거됨.
    };
  }, []);
return(
		<div className="progressMainWrapper">
          <div
            className="progressMainStyle"
            style={{ width: `${position}%` }}
          >
           </div>
        </div>
)

document.documentElement.scrollTop : 스크롤되어 올라간 많큼의 높이 (가변값)
document.documentElement.scrollHeight : 전체 높이 (고정값)
document.documentElement.clientHeight : 눈에 딱 보이는 높이 (고정값)