scroll button

// 스크롤 이벤트
  const [scrollY, setScrollY] = useState(0);
  const [btnStatus, setBtnStatus] = useState(false);
  const handleFollow = () => {
    setScrollY(window.pageYOffset);
    if(scrollY > 200) {
      // 100 이상이면 버튼이 보이게
      setBtnStatus(true);
    } else {
      // 100 이하면 버튼이 사라지게
      setBtnStatus(false);
    }
  }
  React.useEffect(() => {
    console.log("ScrollY is ", scrollY); // ScrollY가 변화할때마다 값을 콘솔에 출력
  }, [scrollY])

  const handleTop = () => {  // 클릭하면 스크롤이 위로 올라가는 함수
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
    setScrollY(0);  // ScrollY 의 값을 초기화
    setBtnStatus(false); // BtnStatus의 값을 false로 바꿈 => 버튼 숨김
  }

  React.useEffect(() => {
    const watch = () => {
      window.addEventListener('scroll', handleFollow)
    }
    watch();
    return () => {
      window.removeEventListener('scroll', handleFollow)
    }
  })

// return 하는 부분
{ btnStatus &&
        <Button
        className={btnStatus ? "topBtn active" : "topBtn"}
        is_float
        _onClick={() => {
          handleTop();
        }}>
          <MdOutlineKeyboardArrowUp size={33}/>
        </Button> }

스크롤 이벤트를 구현해보았다.
뭔가 정리가 안된느낌이지만, state로 상태를 관리하면서 scrollY값의 범위를 주어 일정 높이를 벗어나면 버튼이 나타나고, 클릭시 최상단으로 가는 로직이다.

핵심은 버튼보이기(true)안보이기(false)와 스크롤 시에 매번 바뀌는 Y값을 state로 관리 하는것!
또, 이벤트를 실행하고 return에서 항상 지워주기!