[React] 페이지 상위로 가는 button

프로젝트 중이다.. 

영화 상세페이지 구현중에 스크롤을 컨트롤 하는 버튼이 있으면 좋겠어서 찾아보고 구현해 보았다. 

 

구현 : Up버튼을 누르면 상세 페이지 내 상위로 scroll이 올라감

//return 위
const [toggleBtn, setToggleBtn] = useState(true);

  const handleScroll = () => {
    const { scrollY } = window;
    scrollY > 200 && setToggleBtn(!toggleBtn);
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const goToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
    toggleBtn(false);
  };
  
  //return아래 
  
  <button onClick={goToTop}>Up</button>

 

const [toggleBtn, setToggleBtn] = useState(true);

: toggle 상태를 변경시켜주는 useState 선언해 준다.

 

const handleScroll = () => {
const { scrollY } = window;
scrollY > 200 && setToggleBtn(!toggleBtn);
};

: window 객체에서 scrollY 값을 받아온다.

: scrollY가 200 보다 클때 toggleBtn 상태가 변하게 설정한다.

 

useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
});

: scroll event 발생시, handleScroll 함수 발생 하게한다.

 

const goToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
toggleBtn(false);
};

: 버튼 onClick 시 실행될 함수 goToTop 을 설정해준다. 

: 버튼을 onClick 했을 때, window top의 0 위치로 smooth 하게 올라가는것을 볼 수 있다.