useRef

로드된 화면의 첫 컴포넌트에 focus를 두고싶다고할때
그 인풋값을 불러올때 getElementbyId를 사용한다.
getElementbyId를 대신해 current 프로퍼티에서 사용할 수 있는 것이 useRef이다.

본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다.

고 react docs에 나와있다.

import { useEffect, useRef } from "react";

CounterPage() {
    const inputRef = useRef<HTMLInputElement>(null);
    
    useEffect(()=>{
        console.log("수정되고 다시그려짐")
        inputRef.current?.focus()
    })
 }
 
 <input type="text" ref={this.inputRef}/>

return 부분의 인풋창과 usRef를 바인딩시키면
커서가 깜빡이는 것을 볼 수 있다.