[React] Hooks - useRef

React.js > Hooks > useRef

• useRef는 변수를 관리하고 컴포넌트의 특정 DOM에 접근 시 사용한다.

1) useState의 경우 상태에 변동이 있는 경우 리렌더링되지만, useRef를 이용하면 ref에 저장한 값을 리렌더링없이 업데이트 할 수 있다.

2) useRef를 통해 특정 DOM에 접근할 수 있는데 이 기능이 사용되는 예시로, 유저가 input box를 클릭하지 않아도 자동적으로 focus하는 기능을 주어 바로 키보드로 내용 입력을 할 수 있도록 하는 등이 있다.

import React, { useEffect, useRef } from "react";

const App = () => {
  const reference = useRef();
  useEffect(() => {
    setTimeout(() => reference.current.focus(), 3000);
  }, []);
  // setTimeout함수를 통해 input이 3초 뒤에 focus됨
  return (
    <div>
      <div>hello</div>
      <input ref={reference} placeholder="write in here" />
    </div>
  );
};

• focus() 적용된 모습