React Hooks - useRef

useRef

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

• 자바스크립트에서 특정 요소의 크기를 가져오거나 포커스 하는 등의 기능을 수행하기 위해 DOM Selector가 필요하다.
• React의 컴포넌트에서는 React Hooks의 useRef를 활용해 그 기능을 수행할 수 있다.
• useRef를 통해 ref 객체를 만들고 선택하고 싶은 DOM에 속성으로 해당 ref 객체를 넣어주면 된다.
• 위 코드는 5초 후에 inputRef가 ref 속성으로 지정된 input DOM을 focus하는 코드이다.