[React] <input> 값이 입력 되지 않는 현상

React 강의를 들으며 연습 프로젝트를 진행하다 겪은 시행착오 😅😅

<input> 에 값이 입력 되지 않는 현상

문제 상황

 <form onSubmit={addUserHandler}>
  <label htmlFor="userName">User Name</label>
  <input
    id="userName"
    type="text"
    value={userName}
    />
  <label htmlFor="age">Age (Years)</label>
  <input
    id="age"
    type="number"
    value={userAge}
    />
  <Button type="submit">Add User</Button>
</form>

input 엘리먼트에 value속성만 지정하면 value속성으로만 값을 컨트롤 할 수 있는 권한이 있기 때문에 input 안에 값이 입력되지 않는다.

→ 사용자가 값을 입력하는 권한이 없다.

따라서 onChange 를 써서 input 엘리먼트를 수정할 수 있는 상태로 만들어 줘야 한다.

해결

 <form onSubmit={addUserHandler}>
  <label htmlFor="userName">User Name</label>
  <input
    id="userName"
    type="text"
    value={userName}
    onChange={changeUserName}
    />
  <label htmlFor="age">Age (Years)</label>
  <input
    id="age"
    type="number"
    value={userAge}
    onChange={changeUserAge}
    />
  <Button type="submit">Add User</Button>
</form>