// useClick.js
import { useEffect, useRef } from "react";
const useClick = (onClick) => {
const ref = useRef();
console.log(ref);
useEffect(() => {
const element = ref.current;
if (element) {
element.addEventListener("click", onClick);
}
return () => {
if (element) {
element.removeEventListener("click", onClick);
}
};
}, [onClick]);
return ref;
};
export default useClick;
// index.js
import React, { useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import useTitle from "./useTitle";
const App = () => {
const sayHello = () => console.log("Hello!");
const title = useClick(sayHello);
return (
<div className="App">
<h1 ref={title}>Hello</h1>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
useRef를 통해서 h1태그에 클릭 이벤트를 추가하였습니다.
'React' 카테고리의 다른 글
[React] beforeunload (0) | 2021.01.08 |
---|---|
[React] window.confirm() (0) | 2021.01.08 |
[React] useRef (0) | 2021.01.08 |
[React] title (0) | 2021.01.08 |
[React] 배열 값 동적 출력 (0) | 2021.01.08 |