[JS] 자바스크립트 <input> : id와 name

리액트 공부를 하다 어쩌면 당연할 수도 있지만

생각지도 못했던 엥? 싶었던 부분이 있어서 글을 남겨보려고 한다. 🤔

---

<input id="" name="">

 

form 태그 중 <input>을 사용할 때 id와 name 속성을 지정하는데

name과 id 둘 모두 element를 식별? 참조하기 위해 사용된다.

여기서 name 속성은 form이 제출될 때 서버에 폼 값을 넘겨주기 위해 사용한다.

(굳이 서버로 넘기지않은 값에는 name을 생략해도 무방하다,,!)

 

당연히 id는 유일한 값으로 사용되어야 하기 때문에 중복이 안되고,

name은 중복이 가능한 값이다.

바로 여기서 오늘 적어보려는 주제가 등장한다!

 

(아래 코드는 리액트 공부를 하며 작성하던 코드라 조금 다르다,,,!)

const root = document.getElementById("root");

const App = () => {
  const handleSubmit = (event) => {
  
    event.preventDefault();
    
    alert(
      `FullName: ${event.target.fullname.value}\n
       FirstName: ${event.target.fname.value}\n
       LastName: ${event.target.lname.value}`
    );
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="fname-test">Full name: </label>
      <input type="text" id="fullname" name="fname"/>
      <br><br>
      <label htmlFor="fname">First name: </label>
      <input type="text" id="fname" name="fname"/>
      <br><br>
      <label htmlFor="lname">Last name: </label>
      <input type="text" id="lname" name="lname"/>
      <br><br>
      <input type="submit" value="Submit"/>
    </form>
  );
};

ReactDOM.render(<App />, root);

 

해당 폼은 W3C의 예제를 살짝 변경해보았다 ㅎㅎㅎㅎ

 

Full name, First name 그리고 Last name을 작성하는 폼이다.

사용자가 submit 버튼을 눌렀을 때 input에 적힌 값을 받아와 alert()로 띄워주고 싶다.

그러기 위해 event.target.id.value를 통해 값을 알아내려고 했으나

코드를 실행해보면 firstname은 값을 가져오지 못하는 것을 확인할 수 있다.

 

그 이유는 id 값으로 동일한 name 값이 본인에게 존재하는 것이 아니라

다른 input에 동일한 name 값이 존재하기 때문이다.

name을 잘 보면 fullname, fisrtname 모두 동일한 name 값을 가지고 있다.

 

이런 일은 한 번도 생각해보지 못했는데

호옥시라도 실수하게 된다면 이런 가능성도 존재하겠구나 싶었다.

 

 

마지막으로 하나 더

event.target.id.value로 값을 가져오나

event.target.name.value로 값을 가져오나 동일하게 작동하는 것을 확인할 수 있다.

 

<form onSubmit={handleSubmit}>
  //얘는 id만 존재
  <label htmlFor="fname-test">Full name: </label>
  <input type="text" id="fullname"/>
  <br><br>
  //얘는 name만 존재
  <label htmlFor="fname">First name: </label>
  <input type="text" name="fname"/>
  <br><br>
  <label htmlFor="lname">Last name: </label>
  <input type="text" id="lname" name="lname"/>
  <br><br>
  <input type="submit" value="Submit"/>
</form>

 

 

결론 : 

 

id나 name이 하나라도 있다면

둘 중 하나로 값을 가져올 수 있다!

id로만 찾고싶다고하더라도 name이 중복되면 안됨!

name은 서버로 폼 값을 넘기지 않는다면 생략할 수 있다!

 

 

+)

오늘은 결론이 조금 찝찝한 것 같다 ㅎㅎㅎㅎㅎㅎ

---

⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :)  ⚠️
***    혹시라도 잘못된 정보가 있다면  언제든지 알려주시면 감사하겠습니다  !    ***