[강의노트] [React]

const useScroll = () => {
  const [state, setState] = useState({
    x: 0, // x와 y의 초기값을 0으로 세팅
    y: 0
  });
  const onScroll = () => {
    setState({ x: window.scrollX, y: window.scrollY });
  };
  useEffect(() => {
    window.addEventListener("scroll", onScroll); // scroll 시 onScroll 이벤트 핸들러 지정
    return () => window.removeEventListener("scroll", onScroll); // clean up
  }, []);
  return state;
};

const App = () => {
  const { y } = useScroll();
  return (
    <div className="App" style={{ height: "200vh" }}>
      <h1 style={{ position: "fixed", color: y > 100 ? "red" : "blue" }}>
        Hello
      </h1>
    </div>
  );
};

useScroll은 스크롤을 했을 때 색상을 바꾸는 등의 어떤 이벤트가 일어나는 것
출처 노마드코더