useClick

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

const useClick = (onClick) => {
  const element = useRef();
  useEffect(() => {
    if (typeof onClick === "function") {
      // componentDidMount, componentDidUpdate 일 때 실행하는 부분
      if (element.current) {
        element.current.addEventListener("click", onClick);
      }
    }
    return () => {
      // componentWillUnmount 일 때 실행하는 부분
      if (element) {
        element.removeEventListener("click", onClick);
      }
    };
  }, [onClick]);
  return element;
};

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

    //useRef는 refenence를 사용해 component의 어떤 부분을 선택할 수 있는 방법
    //document.getElementById()와 동등.
  );
};

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

useEffect는 componentDidMount상태에서 동작한다.

dependency값은 [ ]로 빈 값을 줬기 때문에 값이 update 됐을 때를 고려하지 않아도 된다.

removeEventListener는 componentWillUnMount일때 실행이 된다.