# Form(양식)

- ex)로그인, 설문조사, 이벤트 참여...
- 사용자로부터 입력을 받기위해 사용

• React - component의 state를 통해 데이터를 관리
• html - element 내부에 각각의 state가 존재한다

<form>
  <label>
    이름:
    <input type="text" name="name" />
  </label>  
  <button type="submit">제출</button>
</form>  

문제 : 자바스크립트로 입력받은 값의 내부에 접근하기 어렵다

# Controlled Components(통제를 받는 컴포넌트)

- 값이 리액트의 통제를 받는 Input Form Element

function NameForm(props) {
  const [value, setValue] = useState('');

  const handleChange = (event) => { // event는 이벤트 객체를 나타낸다
    setValue(event.target.value);
    // 변경된 값을 setValue에 저장한다
    // event.target : 현재 이벤트가 발생한 타겟을 말한다 -> <input>태그
    // .value : 타겟의 값을 말한다 -> <input>태그의 value값
  }

  const handleSubmit = (event) => {
    alert('입력한 이름: ' + value);
    event.preventDefault();
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름:
        <input type="text" value={value} onChange={handleChange} />
        // 리액트의 state가 value에 값을 항상 넣어준다
        // 값이 변경되었을 경우 onChange에 넣은 헨들러를 탄다
      </label>  
      <button type="submit">제출</button>
    </form>  
  )
}    

즉, 사용자의 입력을 직접 제어할 수 있다

const handleChange = (event) => {
  setValue(event.target.value.toUpperCase());
}

입력받는 값을 모두 대문자로 변환한다