[React] React Hook-2.5 useEffect를 활용한 useScroll

< 초기 화면 >

< 스크롤 바가 500을 초과하면 font color 변경>

 

 

< App.js >

import React, { useRef, useEffect, useState } from "react";
import ReactDOM from "react-dom";

const useScroll = () => {
  const [state, setState] = useState({
    x: 0,
    y: 0
  });
  const onScroll = () => {
    setState({ x: window.scrollX, y: window.scrollY });
  };
  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return state;
};
export default function App() {
  const { y } = useScroll();
  return (
    <div className="App" style={{ height: "500vh" }}>
      <h1 style={{ position: "fixed", color: y > 500 ? "red" : "blue" }}>Hi</h1>
    </div>
  );
}

 

< useScroll() >

const useScroll = () => {
  const [state, setState] = useState({
    x: 0,
    y: 0
  });
  const onScroll = () => {
    setState({ x: window.scrollX, y: window.scrollY });
  };
  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return state;
};

 

1.

const useScroll = () => {
  const [state, setState] = useState({
    x: 0,
    y: 0
  });

- useState를 x : 0, y : 0 으로 초기화한다.  → state가 { x:0, y:0} 으로 초기화된다.

 

2.

  const onScroll = () => {
    setState({ x: window.scrollX, y: window.scrollY });
  };

- onScroll 함수 : 현재 윈도우 스크롤 바의 x, y좌표로 state를 수정한다.

 

3.

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

- useEffect 함수 : window에 onScroll event listener를 추가하고 해당 event에 대한 remove event listener를 return 한다.

- useScroll 함수는 state( {x : ?, y : ?} )를 반환한다.

 

< App() >

export default function App() {
  const { y } = useScroll();
  return (
    <div className="App" style={{ height: "500vh" }}>
      <h1 style={{ position: "fixed", color: y > 500 ? "red" : "blue" }}>Hi</h1>
    </div>
  );
}

- useScroll의 return 값에서 y값을 가져온다.

- y값이 500을 초과하면 color가 red로 변경된다.