[React-Hooks] React Hooks - useClick & useHover

* useClick

• 누군가 element를 클릭하였을 때 함수를 실행시켜준다.

---

* useClick 예시코드

const useClick = (onClick) => {
  if (typeof onClick !== "function") {
    return;
  }
  const element = useRef();
  useEffect(() => {
    if (element.current) {
      element.current.addEventListener("click", onClick);
    }
    return () => {
      if (element.current) {
        element.current.removeEventListener("click", onClick);
      }
    }
  }, [])
  return typeof onClick !== "function" ? undefined: element;
}

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

• 위 예시 코드는 sayHello함수를 가진 useClick이 mount되었을 때 click 이벤트를 추가해준다.
• onClick함수가 할당이 되어있지않으면 바로 함수를 종료시킨다.
• useEffect는 componentDidmount상태에서 동작하는데 위의 예시는 component가 mount 되었을 때 event를 추가해준다.
• componentWillUnMount일 때 이벤트가 발생한 뒤 정리할 필요가 있다.
• 따라서 함수를 return해주는데 return해주는 함수는 eventListener를 정리해주는 함수이다.

---

* useHover

• useClick와 동일한 방식이다.
• click에서 hover로 변경된것

const useHover = (onHover) => {
  if (typeof onHover !== "function") {
    return;
  }
  const element = useRef();
  useEffect(() => {
    if (element.current) {
      element.current.addEventListener("mouseenter", onHover);
    }
    return () => {
      if (element.current) {
        element.current.removeEventListener("mouseenter", onHover);
      }
    }
  }, [])
  return typeof onHover !== "function" ? undefined: element;
}

const App = () => {
  const sayHello = () => console.log("sayHello");
  const hover = useHover(sayHello);
  return (
    <div>
      <h1 ref={hover}>Hi</h1>
    </div>
  )
}