[React] click 이벤트

// useClick.js

import { useEffect, useRef } from "react";

const useClick = (onClick) => {
  const ref = useRef();
  console.log(ref);
  useEffect(() => {
    const element = ref.current;
    if (element) {
      element.addEventListener("click", onClick);
    }
    return () => {
      if (element) {
        element.removeEventListener("click", onClick);
      }
    };
  }, [onClick]);
  return ref;
};

export default useClick;

// index.js

import React, { useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import useTitle from "./useTitle";

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

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

useRef를 통해서 h1태그에 클릭 이벤트를 추가하였습니다.