[React] useRef로 특정 DOM으로 focus설정하기

이전 프로젝트에서 자식 컴포넌트의 함수를 부모 컴포넌트에서 사용할 수 있도록 하기 위해 useRef를 사용하였는데 이번엔 기본적인 DOM조작을 위한 방법으로 사용했다. 해당 방법을 적어두려고 한다.
[React] 부모컴포넌트에서 자식컴포넌트 함수 호출하기

useRef함수?

• 특정 DOM을 선택할 때 사용된다.
• 다시 랜더링 되어도 동일한 참조값을 유지하도록한다.
  [React] useRef() 는 언제 사용하는가?

이번 프로젝트에서는 특정 엘리먼트의 크기나 위치를 가져올 수 있도록 하기 위해 DOM에 설정하였고 해당 DOM에 focus를 주어 커서의 이동을 구현하였다.

import React, { useState, useRef } from 'react'

const emailInput = useRef()
const [login, setLogin] = useState()

// 회원가입 요청
const handleSignup = () => {
  if (isValidEmail && isValidPassword && isSamePassword) {
    axios
      .post(
      `${process.env.REACT_APP_API_URL}/sign-up`,
      {
        email: userInfo.email,
        password: userInfo.password,
        mobile: userInfo.mobile,
      },
      { 'Content-Type': 'application/json' },
    )
      .then((result) => {
      setLogin(result.data.token)
      setTimeout(() => {
        navigate('/')
      }, 50)
    })
      .catch((error) => console.log(error))
  } else if (!isValidEmail) {
    alert('이메일을 확인해주세요.')
    emailInput.current.focus()
  } else if (!isValidPassword) {
    alert('비밀번호는 8자 이상 15자 이하여야 합니다.')
  } else if (!isSamePassword) {
    alert('비밀번호가 일치하지 않습니다.')
  }
}

<Input
  type="email"
  placeholder="이메일을 입력하세요"
  ref={emailInput}
/>

사실 생각보다 아주 사용하기 편하다. 원하는 element에 ref를 넘겨주고 해당 useRef를 기억하고, focus함수로 커서를 이동시켜주면 되겠다.