인프런 커뮤니티 질문&답변
작성한 질문수
ref에 담기는 돔 요소가 어떤 돔 요소를 가리키는 걸까요?
해결된 질문
작성
·
119
0
7:45에서 ref={inputRef} 코드가 보이는데요,
console에 출력되는 input요소가 단순 모양만 같은 <input... > 인것인지, 아니면 현재 페이지의 input 요소인건지 궁금합니다.
만약 후자라면 똑같이 생긴 input 요소를 2개 만들어도 정확히 원하는 요소를 가리키겠지만, 전자라면 버그가 발생하지 않을까? 하는 생각이 들었어요.
그리고 만약 지금 name 말고 다른 input들도 유효성 검사를 하고 싶다면.. ref를 여러개 만들어야하나요??
질문이 너무 뒤섞여있네요 하하
답변 1
0
이정환 Winterlood
지식공유자
안녕하세요 이정환입니다.
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>
);
}