useRef

useRef는

자바스크립트에서 태그에 접근할 때
getElementById(), getElementsByClassName 등을 이용한다.
이와 다르게 React에서는 Ref를 이용한다.

그리고 Ref는 클래스 컴포넌트와 함수 컴포넌트에서 이용 방법이 서로 다르다.

클래스 컴포넌트에서는 createRef()라는 메서드를 이용한다.

import {createRef} form 'react';
// 메서드 가져오기(import)
inputRef = createRef();
// Ref코드 만들기
<input type="text" ref={this.inputRef}/>;
// Ref를 적용시킬(접근할) 태그 설정 
componentDidMount(){
this.inputRef.current?.focus()
}
// Ref를 이용해 마운트 됐을 때 input으로 focus 적용

똑같은 기능을 함수 컴포넌트로 작성하려면

import {useRef, useEffect} from 'react'
// useRef 가져오기(import)

const inputRef = useRef()
//Ref코드 만들기
<input type="text" ref={inputRef}/>
// Ref를 적용시킬(접근할) 태그 설정 

useEffect(()=>{
		inputRef.current?.focus()
	})
// useRef, useEffect를 이용해 마운트 됐을 때 input으로 focus 적용

이렇게 useRef라는 훅을 이용한다.
같이 사용된 useEffect 확인하기

두 코드 모두 페이지가 마운트 되었을 때 커서가 input 창에 focus된다