Ref

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

//App
export default function App() {
  //ref 는 기본적으로 우리의 component의 어떤 부분을 선택할 수 있는 방법인데
  // document.getElementById()를 사용한 것과 같다.
  const potato = useRef();
  
  setTimeout(() => potato.current.focus(), 5000);

  return (
    <div className="App">
      <div>Hi</div>
      <input ref={potato} placeholder="la" />
    </div>
  );
}

useClick

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

const useClick = (onClick) => {
  if (typeof onClick !== "function") {
    return;
  }
  const element = useRef();
  useEffect(() => {
    //refrence안에 element.current가 있는지 확인한다
    if (element.current) {
      //조건이 만족되면 click 이벤트를 부여한다.
      element.current.addEventListener("click", onClick);
    } //useEffect는 정리하는 것이 가능하다. 즉 이벤트가 발생한 후 정리해 주는 것이다
    //그것이  return 해주는 것이다.

    return () => {
      //willComponentUnmount 될 때 호출될 것이다.
      if (element.current) {
        element.current.removeEventListener("click", onClick);
      }
    };
  }, []);
  return element;
};
// 이 모든 것은 reference가 있기에 작동하는 것이다.
//App
export default function App() {
  const sayHello = () => console.log("sayHello");
  const title = useClick(sayHello);
  //ref 는 기본적으로 우리의 component의 어떤 부분을 선택할 수 있는 방법인데
  // document.getElementById()를 사용한 것과 같다.
  return (
    <div className="App">
      <div>Hi</div>
      <h1 ref={title}>Hi</h1>
    </div>
  );
}

useEffect는 정리하는 것이 가능하다. 즉 이벤트가 발생한 후 정리해 주는 것이다
그것이 return 해주는 것이다.