React Hooks 연습하기

6. useScroll

import React, { useState, useEffect } from "react";

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


const App1 =() =>{
	const { y } = useScroll();
  return(
  <div style ={{height:"1000vh"}}>
  <h1 style = {{ position : "fixed", color: y> 150 ? green : red}}>
    Hello, Strangers!
    </h1>
  </div>
  
  )
}

export default App1;

6. 결과물