[React] useRef로 특정 DOM 선택

• JavaScript를 사용할 때
  • 우리가 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택
  • 리액트에서 ref라는 것을 사용
• 함수형 컴포넌트에서 ref를 사용할 때, useRef라는 Hook 함수 사용
  • 클래스형 컴포넌트에서는 콜백함수 / React.createRef 함수 사용

초기화 버튼을 클릭했을 때 input에 포커스가 잡히도록 useRef를 사용하여 기능 구현

• onReset 함수에서 input에 포커스를 하는 focuse() DOM API 호출

import { useState, useRef } from 'react'

export const InputSample = () => {
  const [inputs, setInputs] = useState({
    name: '',
    nickName: '',
  })

  const nameInput = useRef()

  const { name, nickName } = inputs // 비구조화 할당을 통해 값 추출

  const onChange = (e) => {
    const { value, name } = e.target // 우선 e.target에서 name과 value 추출
    setInputs({
      ...inputs, // 기본의 input 객체를 복사한 뒤
      [name]: value, // name 키를 가진 값을 value로 설정
    })
  }

  const onReset = () => {
    setInputs({
      name: '',
      nickName: '',
    })
    nameInput.current.focus()
  }
  return (
    <div>
      <input name="name" placeholder="이름" onChange={onChange} value={name} ref={nameInput} />
      <input name="nickName" placeholder="닉네임" onChange={onChange} value={nickName} />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickName})
      </div>
    </div>
  )
}

• useRef()를 사용하여 Ref 객체 만듦
• 이 객체를 우리가 선택하고 싶은 DOM에 ref 값 설정
• Ref 객체의 .current 값은 우리가 원하는 DOM을 가리킴

해당 내용은 다음 자료를 참고했습니다.
https://react.vlpt.us/basic/10-useRef.html