본문 바로가기

Java Scripts/React.js

Hook in React - useHover

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