React Hooks - useRef

Q useRef에 대해 설명해주세요.

A

DOM 요소에 접근할 수 있도록 하는 React Hook입니다.
useref는 state와 비슷하지만 ref에 저장한 값은 값이 변화해도 내부 변수들이 초기화되지 않습니다. 그래서 주로 리렌더링을 발생시키지 않는 값을 저장해서 사용합니다.

예시

화면 렌더링 후 아이디 input에 자동 포커싱.

import { useEffect, useRef } from "react";
import "./App.css";

function App() {
  const idRef = useRef("");

  // 렌더링이 될 때
  useEffect(() => {
    idRef.current.focus();
  }, []);

  return (
    <>
      <div>
        아이디 : <input type="text" ref={idRef} />
      </div>
      <div>
        비밀번호 : <input type="password" />
      </div>
    </>
  );
}

export default App;