useRef

: 리렌더링과 상관없이 값을 기억하기 위해 사용

: DOM API를 직접 사용하지 않고 요소를 다루기 위한 용도

• state : 리렌더링이 꼭 필요한 값을 다룰 때 사용
• ref : 리렌더링을 발생시키지 않는 값을 저장할 때 사용

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

const App3 = () => {

const idRef = useRef('')

useEffect(() => {
idRef.current.focus();
} ,[])

  return (
    <div>
      <div>
        id: <input type="text" ref={idRef} />
      </div>
      <div>
        pw: <input type="password" />
      </div>
    </div>
  );
};

export default App3;

<input /> 태그에 ref라는 속성으로 DOM 요소에 접근할 수 있다.

=> useRef를 사용하여 포커싱 주기
화면이 렌더링 되면 input 텍스트 타입에 포커스가 들어간다.

state와 비슷한 만큼 유의해서 사용해야 하기 때문에 주의할 필요성이 있어보인다.