useRef

JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다.

리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있습니다.

그럴 땐, 리액트에서 ref 라는 것을 사용합니다.

함수형 컴포넌트에서 ref 를 사용 할 때에는 useRef 라는 Hook 함수를 사용합니다.
출처:

실습을 통해 더 자세하게 알아봅시다

페이지가 초기화가 된 상태에서 바로 인풋창에 커서가 포커스가 가게 만들어 봅시다.

export default function Counter () {

  const inputRef = useRef<HTMLInputElement>(null);
  
 useEffect(() => {
    inputRef.current?.focus();
,[])

  return (
    <div>
      <input type='text' ref={inputRef}/>
    </div>
  )
}

useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 한다.

useEffect를 같이 사용해서 화면이 처음 렌더가 되었을 때 input창에 커서를 깜빡이게 만들었다.