Hook in React - useClick

note) useClick 함수를 정의하고 그 안에 useEffect(function(),[]) 함수를 호출하면 페이지가 열리는 시작지점에 내부의 function을 호출하는데, blank 배열 [] 이니까  페이지가 시작하는 최초에 한번 함수를 호출한다 (여기서는 onClick 함수가 등록 된다)
여기서 알게된 새로운 사실이,  내부에 정의한 arrow function을 return 하게되면,  페이지가 종료되는 시점에 return 된 함수를 실행한다. (여기서는 앞에서 등록된 onClick 함수가 unregister 된다)

 

note) useRef() 에서 return 된 element 가  useClick 에서 return 되고 return된 element 가 <h1 ref={title}>Hi</h1> 와 같이 사용된다.

 

note) self로  event listener 를 등록하고 제거하는  방법이 나와있다. 
 componentDidMount, componentDidUpdate, :  "click" listener 가 등록된다.
   if (element.current) {
      element.current.addEventListener("click", onClick); 
    }

componentWillUnMount :  "click" listener 가 제거된다.
   return () => {
      if (element.current) {
        element.current.removeEventListener("click", onClick);
      }
    };

note) useClick 함수로 외부에서 정의한 함수를 파라미터로 넣을 수 있다.

 

note) Hi element 를 click 하면  console.log("say hello") 이 호출된다

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

export 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 element;
};


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

 

note) 위는 아래의 교육과장을 이수하면서 정리한 것이다.

https://nomadcoders.co/react-hooks-introduction/lobby?utm_source=free_course&utm_campaign=react-hooks-introduction&utm_medium=site