[REACT] Focus an input - useRef

Focus an input upon a component mounting.

 

useRef: Within React, we normally interact with the virtual DOM. Sometimes we need to interact with the actual DOM, however, and to do so you can use refs.

 

Uppm page load, focus the input.

 

FocusInput.js

import { useEffect, useRef } from 'react'

export default function FocusInput() {
  const focusedInput =  useRef(null)
  useEffect(() => {
    focusedInput.current.focus()
  }, [])
  return (
    <div>
      <label htmlFor='focused-input'>Focus me on page load!</label>
      <input name='focused-input' ref={focusedInput}/>
    </div>
  )
}

 

App.js

import FocusInput from './FocusInput'

function App () {
  return (
    <div className='App'>
      <FocusInput />
    </div>
  )
}

export default App

 

결과 화면