특정 태그를 자바스크립트로 접근할때 항상 document.getElementById()를 사용했었다.
하지만 리액트에서는 virtual DOM(가상돔)을 다루기 때문에 저 방법으로 접근하면 문제가 될수도 있다. 그러면 리액트에서는 어떻게 접근을할까??

클래스형 컴포넌트 Ref

클래스형 컴포넌트에서는 createRef() 메서드를 이용해 태그에 접근한다

// 메서드 임포트
import { createRef } from 'react'

// Ref 생성
inputRef = createRef()

// Ref를 적용하고싶은 태그
<input type = "text" ref = { this.inputRef } />

//태그에 접근해서 실행
componentDidMount() {
	this.inputRef.current?.focus()
}

함수형 컴포넌트 Ref

함수형 컴포넌트에서는 useRef 훅을 이용해 태그에 접근한다

// 메서드 임포트
import { useRef } from 'react'

// Ref 생성
const inputRef = useRef()

// Ref를 적용하고 싶은 태그
<input type ="text" ref = { inputRef } />

//태그에 접근해서 실행
useEffect(() => {
	inputRef.current?.focus()
})