리팩토링 / 부산에 가면 1. Scroll to Top

const ScrollToTop = () => {
    const [scrollY, setScrollY] = useState(0);
    const [BtnStatus, setBtnStatus] = useState(false);
    const handleFollow = () => {
        setScrollY(window.scrollY);
        if(scrollY > 100){
            setBtnStatus(true)
        }else{
            setBtnStatus(false)
        }
    }
    const handleTop = () => {  // 클릭하면 스크롤이 위로 올라가는 함수
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });
        setScrollY(0);  // ScrollY 의 값을 초기화
        setBtnStatus(false); // BtnStatus의 값을 false로 바꿈 => 버튼 숨김
    }
    
  
    useEffect(() => {
        const watch = () => {
            window.addEventListener('scroll', handleFollow);
        }
        watch()
        return () => {
            window.removeEventListener('scroll', handleFollow);
        }
    })
    return (
            <TopBtn className={BtnStatus ? "topBtn active" : "topBtn"} onClick={handleTop} >TOP</TopBtn>
    )
}

1. ScrollToTop 버튼이 항상 떠있는 것이 아니라 어느 정도 스크롤을 내렸을 경우에만 UI가 나타나도록 하였다.

window.scrollY 이 100 보다 클 때 BtnStatus가 true가 되어 UI가 나타난다.

2. handleTop을 눌렀을 때 window.scrollTo를 조작한다.

window.scrollTo의 두 가지 사용법

1. window.scrollTo(x, y)

파라미터로 주어진 x는 x좌표, 즉 가로 위치를 말하는 것이고, 
y는 y좌표, 즉 세로 위치를 말한다.

2. window.scrollTo({top, left, behavior})

top : 세로위치, left: 가로위치, behavior: 스크롤 효과속성
behavior의 값으로 'smooth' 와 'auto'가 있다.

원래 'instant'라고 즉시 화면이 좌표로 이동하는 옵션이 있었는데 'auto'로 이름이 바뀌었다고 한다.참고

smooth 옵션은 해당 위치 까지 즉시 이동하는 것이 아니라 이동 경로를 보여준다.

• behavior 옵션
  - auto : 기본값, 바로 위치로 이동
  - smooth : 부드럽게 이동