작성한 질문수 13

0

안녕하세요 이정환입니다.

ref.current가 가리키는 요소는 실제 DOM 요소입니다. 단순히 모양만 같은 <input>은 아닙니다. 현재 페이지의 input 요소라고 보시는게 정확할 것 같습니다. 따라서 버그가 발생할 가능성은 없다고 보셔도 괜찮을 것 같습니다.

추가로 여러개의 input을 관리하려면 기본적으로는 각각의 input마다 ref를 만들어 지정해주셔야 합니다. 그러나 이때 다음과 같이 ref를 객체 또는 배열 형태로 정의하면 하나의 ref에 여러개의 DOM을 지정하도록 할수도 있으니 참고하시면 좋을 것 같습니다.

import { useRef } from "react";

function App() {
  const refs = useRef({});

  const handleValidation = () => {
    console.log("Name:", refs.current["name"].value);
    console.log("Email:", refs.current["email"].value);
  };

  return (
    <div>
      <input
        ref={(el) => (refs.current["name"] = el)}
        type="text"
        placeholder="Name"
      />
      <input
        ref={(el) => (refs.current["email"] = el)}
        type="email"
        placeholder="Email"
      />
      <button onClick={handleValidation}>Validate</button>
    </div>
  );
}