react scroll 이벤트 (header)

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

  function onScroll() {
    sePosition(window.scrollY);
  }

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

1. useState을 이용하여 스크롤 위치를 관리한다.
2. onScroll 함수는 스크롤 이벤트가 발생할때 마다 호출하게 된다.
   2-1. window.scrollY를 이용하여 현재 스크롤 위치를 가져오고, sePosition을 통해 업데이트를 한다.
3. useEffect를 통해 마운트가 실행될때마다 window.addEventListener || removeEventListener을 사용하여 이벤트를 등록 및 제거한다.
4. 스크롤 위치가 변경될 때마다 position값이 업데이트된다.