기본 Form

기본적인 Form은 label input submit 으로 구성된 골격일 것입니다.

아래 html의 Form을 예제로 활용합니다.

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 

결과적으로 위 예시를 React에서 사용하려면

1. react에서는 for가 아닌 htmlFor를 쓰라고 권장합니다.
   사용하지 않는다면 아래와 같은 에러가 출력됩니다.
   
2. react에서는 onChange 이벤트핸들러 없이 그냥 value 속성을 사용하면 안됩니다. 사용하려면 value를 defaultValue 로 바꿔줍니다.
   
3. 닫는 태그를 꼭 달아줍니다.

아래처럼 변경했습니다.

          <form action="/action_page.php">
            <label htmlFor="fname">First name:</label>
            <br />
            <input type="text" id="fname" name="fname" defaultValue="John" />
            <br />
            <label htmlFor="lname">Last name:</label>
            <br />
            <input type="text" id="lname" name="lname" defaultValue="Doe" />
            <br />
            <br />
            <input type="submit" value="Submit" />
          </form>

아래처럼 submit 버튼 이벤트를 통해서 input에 입력된 값을 읽을 수 있습니다.

const handleSubmit = (event) => {
  event.preventDefault();

  // console.log(event.target);
  console.dir(event.target);
  alert(
    `FirstName: ${event.target.elements.fname.value}, LastName: ${event.target.elements.lname.value}`
  );
};

function App() {
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="fname">First name:</label>
      <br />
      <input type="text" id="fname" name="fname" defaultValue="John" />
      <br />
      <label htmlFor="lname">Last name:</label>
      <br />
      <input type="text" id="lname" name="lname" defaultValue="Doe" />
      <br />
      <br />
      <input type="submit" value="Submit" />
    </form>
  );
}

select 엘리먼트

추가로 select 엘리먼트도 한 번 보겠습니다.

const handleSubmit = (event) => {
  event.preventDefault();

  // console.log(event.target);
  console.dir(event.target);
  alert(
    `FirstName: ${event.target.elements.fname.value}, Choose a car: ${event.target.elements.cars.value}`
  );
};

function App() {
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="fname">First name:</label>
      <br />
      <input type="text" id="fname" name="fname" defaultValue="John" />
      <br />
      <label htmlFor="cars">Choose a car:</label>
      <select id="cars" name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
      </select>
      <br />
      <br />
      <input type="submit" value="Submit" />
    </form>
  );
}

참고

console.dir()

console.dir() : 객체 전체의 구조를 보여줍니다.
console.dir(event.target);을 사용하면 아래와 같은 결과를 console창에서 보여줍니다.

form element 안의 element에 접근하기

console.dir(event.target.elements); 을 사용하면 아래와 같은 값에 접근할 수 있습니다.
event.target.elements.cars로 id값 cars의 value에 접근할 수 있습니다.

input 태그의 id값과 name값이 다를 경우, id값이나 name값 어느쪽으로도 접근이 가능합니다.
id와 name 값이 다를경우, 아래처럼 id와 name값으로도 접근할 수 있도록 속성을 각각 부여하고 같은 input 태그를 가리키도록 합니다.