react : 스크롤 감지 이벤트

const [position,setScroll] = useState(0);
  function onScroll() {
    setScroll(window.scrollY);
  console.log(position);
  }
  

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

 

• useState 를 통해 스크롤을 감지할 값의 변수를 만들어 준다.
• 감지할 변수를 onScroll 함수안에 setScroll 로 하여 window.scrollY 를 통해 값을 넣어준다.
• console.log(position)을 찍어보면 스크롤을 할수록 값이 증가하는걸 알 수 있다.
• useEffect 를 통해 맨 처음 랜더링이 되었을때 window.addEventListener 이벤트를 통해 'scroll'을 인지하고 on,scroll 함수를 실행시켜준다. return 을 통해 remove를 해주면서 랜더링 되었을때 기존 값을 초기화 시켜준다.