useRef 사용해서 특정 DOM에 접근하기

import { useState, useRef } from "react";

function InputSample() {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: "",
  });
  const nameInput = useRef();
  const { name, nickname } = inputs;
  const onChange = (e) => {
    const { name, value } = e.target;

    // 새로운 객체 설정
    setInputs({
      ...inputs,
      [name]: value,
    });
  };

  const onReset = () => {
    setInputs({
      name: "",
      nickname: "",
    });
    // nameInput을 참조하는 DOM에 focus 이동
    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>
  );
}
export default InputSample;

• 원하는 DOM 요소에 ref={useRef이름}을 넣어 직접 DOM에 접근할 수 있다.
• useRef 안에는 해당 DOM을 가리키게 되는 current라는 값이 들어있다.