#4. useClick hook

useClick

---

useRef를 통해 특정 element를 클릭하면 특정 동작을 수행하도록 하는 기능

import React, { useEffect, useState, useRef } from "react";
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);
      }
    }; //컴포넌트가 unmount 될 때 실행
  }, []); 
  
  return element;
};


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

export default App;

 

  if (typeof onClick !== "function") {
    return;
  }

• onClick이 함수 타입이 아니면 더 이상 useClick을 실행하지 않고 끝낸다.

---

const useClick = (onClick) => {

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

.
.
.

const sayHello = () => console.log("say hello");
const title = useClick(sayHello);

<h1 ref={title}> Hi </h1>

• Hi에 reference를 부여한다. 
• title은 useClick을 호출하는데, useClick은 element를 return한다. 즉, Hi에는 element ref가 부여된다.
  • title이 useClick을 호출할 때 파라미터로 sayHello를 넣어준다. sayHello는 "say hello"를 콘솔에 출력하는 함수이다.
• useClick에서는 element를 return 할 때 element에 addEventListener 함수를 바인딩시켜 이벤트 발생 시 수행해야 하는 동작을 정의한다.
• if 문을 사용한 이유는 element가 존재했을 때 onclick 함수를 실행하도록 하기 위해서이다.

---

      element.current.addEventListener("click", onClick);

• addEventListener ( type , listener ) 형식으로 사용된다.
  • click 타입은 element.current, 즉 현재 요소를 클릭했을 때 onClick 함수를 실행한다. 여기서 onClick함수는 "say hello"를 출력하는 sayHello 함수이다. Hi를 클릭 -> 콘솔에 say hello 출력
  • 이 외에도 mouseover, mouseout, mousedown, mouseup, mousemove, focus 등의 type이 있다.
    cf) https://kyounghwan01.github.io/blog/JS/JSbasic/addEventListener/

JavaScript - addEventListener 사용법, js, html, css, 웹개발, 개발자, 프론트엔드, 백엔드, web

---

  useEffect(() => {

    return () => {
      if (element.current) {
        element.current.removeEventListener("click", onClick);
      }
    };
    
  }, []);

• return 문은 컴포넌트가 unmount 되었을 때 수행된다.
• 즉, 컴포넌트가 unmount 되는 순간에 element가 존재한다면 element에 바인딩 되어있던 eventListener를 제거한다.