[강의노트] Hooks - useClick

useClick

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

const useClick = onClick => {
  if (typeof onClick !== "function"){
    return;
  }
  const element = useRef();
  useEffect(() => {
    // function called when componentDidMount, componentDidUpdate 
    // (only when no dependency)
    if (element.current) {
      element.current.addEventListener("click", onClick);
    }
    // componentWillUnmount
    return () => {
      if (element.current) {
        element.current.removeEventListener("click", onClick);
      }
    };
  }, []);
  return element;
};

const App = () => {
  const sayHello = () => console.log("say hello");
  const title = useClick(sayHello);
  return (
    <div className="App">
      <h1 ref={title}>Hi</h1>
    </div>
  );
};

export default App;