[react] useClick

useEffect를 사용해서 element의 current가 존재할 때 클릭 이벤트리스너를 추가해주고 - componentDidMount

함수가 실행되고 난 뒤 리무브이벤트리스너를 리턴해서 지워준다. - componentWillUnmount

ref를 통해 엘리먼트를 사용할 수 있음

 

title을 클릭할 때마다 콘솔에 sayHello가 찍힌다. - componentDidUpdate

import "./styles.css";
import { useEffect, useRef } from "react";
import React from "react";

function App() {

  const useClick = (onClick) => {
    const element = useRef();
    useEffect(() => {
      if(element.current){
        element.current.addEventListener("click", onClick);
      }
      return () => {
        element.current.removeEventListener("click", onClick);
      }
    },[]);
    return element;
  }
  const sayHello = () => console.log("sat Hello!");
  const title = useClick(sayHello);
  return (
    <div className="App">
      <h1 ref={title}>H2</h1>
    </div>
  );
}

export default App;