[React] CustomHook ๐Ÿ‘‰ useClick

์Šน๋ฏธ๋‹ˆยท2021๋…„ 7์›” 10์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
10/10

https://nomadcoders.co ์—์„œ ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ์ •๋ฆฌํ•œ ๋‚ด์šฉ ์ž…๋‹ˆ๋‹ค.

1. useClick ์ด๋ž€?

  • ์š”์†Œ๋ฅผ ์„ ํƒํ–ˆ์„ ๋•Œ click ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.
  • useRef
    • useRef ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์šฐ๋ฆฌ๊ฐ€ component์˜ ์–ด๋–ค ๋ถ€๋ถ„์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.
    • document.getElementByID()๋ฅผ ์‚ฌ์šฉํ•œ ๊ฒƒ๊ณผ ๋™์ผํ•จ

2. useClick ์ž‘์„ฑํ•˜๊ธฐ

import React, { useEffect, useRef } from "react";

const useClick = (onClick) => {
  const element = useRef();

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

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

  return element;
}

export default useClick;

3. useClick ์‚ฌ์šฉํ•˜๊ธฐ

import React, { useEffect, useState, useRef } from "react";

import useClick from "./Hooks/useClick";


const App = () => {
  const sayHello = () => console.log("hello");
  const greeting = useClick(sayHello);

  return (
    <div className="app">
      <h3 ref={greeting}>Hello World</h3>
    </div>
  ) 
}

export default App;
profile
Web Frontend Developer

0๊ฐœ์˜ ๋Œ“๊ธ€