[React] useRef 사용하기.

JavaScript로 개발을 할 때는 특정 태그를 잡기 위하여, getElementById, getElementByClass, querySelector와 같은 DOM 선택자를 사용해서 특정 태그, DOM을 선택 하였다.

 

리액트에서도 가끔 DOM을 선택할 필요가 있을 때가 있으며, 그 때 사용하는 것이 useRef 훅이다.

 

useRef를 생성하고, 태그의 ref 속성으로 생성한 useRef와 연결하여 사용한다.

import { useRef } from 'react'

export default function Page() {
  const inputTag = useRef()

  return <input ref={inputTag} />
}

 

DOM 객체의 current.focus()를 이용하면, 원하는 객체를 선택하게 할 수 있다.

 

current.focus()와 useRef를 이용하여 버튼을 누르면, INPUT TAG를 선택하는 컴포넌트를 개발해보자.

 

import { useRef } from 'react'

export default function Page() {
  const inputTag = useRef()

  const onClick = () => inputTag.current.focus()

  return (
    <div>
      <input ref={inputTag} />
      <button onClick={onClick}>CLICK</button>
    </div>
  )
}