Tech Blog of Pinomaker
Published 2022. 8. 21. 11:41
[React] useRef 사용하기. F.E/React

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>
  )
}

'F.E > React' 카테고리의 다른 글

[React] useCallback 사용하기.  (0) 2022.08.26
[React] useMemo 사용하기.  (0) 2022.08.26
[React] INPUT 관리하기.  (0) 2022.08.21
[React] useInput Hook 사용하기  (0) 2022.08.10
[React] useState 사용하기.  (0) 2022.08.10
profile

Tech Blog of Pinomaker

@pinomaker

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!