[React Hooks 총정리] useRef를 사용해서 DOM 요소에 접근하기

useRef

const ref = useRef(value)

• 접근하고자 하는 태그의 ref 속성으로 넣어주기만 하면 쉽게 해당 요소에 접근 가능

<input ref={ ref } />

• 대표적인 usecase로 textbox같은 input 요소에 focus를 줄 때 많이 사용됨
• 로그인 페이지가 로딩되어서 화면에 보여졌을 때 id를 넣는 공간을 굳이 클릭하지 않아도 자동적으로 focus가 되어있게 해준다면 바로 키보드로 id를 입력할 수 있기 때문에 편리함
• Ref를 사용하면 쉽게 DOM요소에 접근해서 이러한 기능을 구현할 수 있음
• 바닐라자바스크립트의 Document.querySelector()과 같은 기능

실제 코드 구현

• current 값에 input 요소 넣어주기

• input에 focus 됨