REACT useClick, useHover

useClick

useRef() -> document.getElementByID() 사용한 것과 동등하다. 아래의 코드에서 h1 tag는 title이라는 ref를 갖고 있고 useClick을 훅으로 갖고 있다. 따라서 h1을 클릭하는 경우 useClick 내부의 동작을 하게 된다. useEffect로 인하여 클릭할 때 event 리스너를 동작해주고 함수 객체를 반환할 때 이벤트 리스너를 제거한다. 

didMount, didUpdate 에 동작에서 addEventListener 가 동작하고 WillUnmount에서 제거한다.

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

import "./styles.css";

const useClick = (onClick) => {
  const element = useRef();
  useEffect(() => {
    // Mount 상태에서만 동작한다. didUpdate
    if (element.current) {
      element.current.addEventListener("click", onClick);
    }
    return () => {
      // WillUnMount 때 호출 한다.
      if (element.current) {
        element.current.removeEventListener("click", onClick);
      }
    };
  }, []);
  return element;
};

export default function App() {
  const sayHello = () => console.log("say hello");
  const title = useClick(sayHello);

  return (
    <div className="App">
      <h1 ref={title}>Hi</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

 

useHover

useHover의 경우 useClick과 비슷하나 이벤트 리스너에 mouseenter로 설정해야 한다.

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

import "./styles.css";

const useHover = (onClick) => {
  const element = useRef();
  useEffect(() => {
    // Mount 상태에서만 동작한다. didUpdate
    if (element.current) {
      element.current.addEventListener("mouseenter", onClick);
    }
    return () => {
      // WillUnMount 때 호출 한다.
      if (element.current) {
        element.current.removeEventListener("mouseenter", onClick);
      }
    };
  }, []);
  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>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);