useScroll hooks를 사용해서 스크롤을 했을때 이벤트를 발생시키기 useScroll 예시 스크롤을 하면 color가 blue에서 red로 바뀌는 이벤트 const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = () => { setState({ y: window.scrollY, x: window.scrollX }); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); return state; }; c..

useEffect를 활용하여 title을 변경해보자 웹 페이지 title을 업데이트 하는 hooks 만들어보기 const useTitle = (initialTitle) => { const [title, setTitle] = useState(initialTitle); const updateTitle = () => { const htmlTitle = document.querySelector("title"); htmlTitle.innerText = title; }; useEffect(updateTitle, [title]); return setTitle; }; const App = () => { const titleUpdater = useTitle("Welcome"); setTimeout(() => titleU..

useEffect useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말해줌 componentDidMount, componentDidUpdate, componentWillUnmount, getDerivedStateFromProps의 역할을 수행 useEffect 예시1 const App = () => { const sayHello = () => console.log("hello"); useEffect(() => { sayHello(); }); const [number, setNumber] = useState(0); const [anotherNumber, setAnotherNumber] = useState(0); return ( Hello set..