[React-Hooks] React Hooks - useRef

* useRef

• 특정 DOM 선택하기
• JavaScript 를 사용 할 때 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다.
• 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있다.
  • ex) 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정
• 그럴 때 리액트에서 ref 라는 것을 사용한다.

* useRef 예시 코드

import { useRef } from "react";

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

• useRef를 이용해 html element에 접근할 수 있게 되었다.
• useRef를 이용해 input을 조작할 수 있게 된다.