[React] React Hooks (5) - useRef

useRef

reference는 기본적으로 component의 어떤 부분을 선택할 수 있는 방법

document.getElementByID()와 같은 역할

 

useRef 예시1

const App = () => {
  const input = useRef();
  setTimeout(() => input.current.focus(), 5000);
  return (
    <div className="App">
      <div>Hello</div>
      <input ref={input} placeholder="hi" />
    </div>
  );
};

5초 뒤 input이 선택되어 focus 됨

 

---

useRef 예시2

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

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

React 16.8v 부터는 Hooks을 조건문, 반복문, 중첩함수 내에서 호출할 수 없기에 위와 같은 결과를 얻으려면 useEffect 내에서 이벤트 바인딩을 막고 undefinded를 리턴해야하지만 hooks 이해를 위해 위의 코드를 수정하지는 않을 것임