728x90
note) useHover 함수를 정의하고 그 안에 useEffect(function(),[]) 함수를 호출하면 페이지가 열리는 시작지점에 내부의 function을 호출하는데, blank 배열 [] 이니까 페이지가 시작하는 최초에 한번 함수를 호출한다 (여기서는 onHover 함수가 등록 된다)
내부에 정의한 arrow function을 return 하게되면, 페이지가 종료되는 시점에 return 된 함수가 실행된다. (여기서는 앞에서 등록된 onHover 함수가 unregister 된다)
note) useRef() 에서 return 된 element 가 onHover에서 return 되고 return된 element 가 <h1 ref={title}>Hi</h1> 와 같이 사용된다.
note) Hi element 로 mouse move 하면 console.log("say hello") 이 호출된다
import { useEffect, useRef } from "react";
export const useHover = onHover => {
if (typeof onHover !== "function") {
return;
}
const element = useRef();
useEffect(() => {
if (element.current) {
element.current.addEventListener("mouseenter", onHover);
}
return () => {
if (element.current) {
element.current.removeEventListener("mouseenter", onHover);
}
};
}, []);
return element;
};
export default function App() {
const sayHello = () => console.log("say hello");
const title = useHover(sayHello);
return (
<div className="App">
<h1 ref={title}>Hi</h1>
</div>
);
}
'Java Scripts > React.js' 카테고리의 다른 글
Hook in React - useFadeIn (0) | 2023.09.28 |
---|---|
Hook in React - useConfirm (0) | 2023.09.28 |
Hook in React - useClick (0) | 2023.09.28 |
Hook in React - useTitle (0) | 2023.09.28 |
Hook in React - useTabs (0) | 2023.09.28 |