💗 Form: 양식

텍스트 입력 뿐 아니라 사용자가 무언가를 선택해야 하는 모두,
사용자로부터 입력을 받기 위해 사용

✍ HTML Form

<form>
  <label>
    이름:
    <input type="text" name="name"/>
  </label>
  <button type="submit">제출</button>
</form>
//자체적으로 state를 관리, js를 통해 각각의 값의 접근이 어려움

✍ Controlled Components

값이 리액트의 통제를 받는 input form element,
모든 데이터를 state에서 관리

function NameForm(props){
  const [value, setValue] = useState('');
  
  const handleChange = (event) => {
    setValue(event.target.value);
  }
  //새롭게 변경된 값을 value라는 이름의 state에 저장
  //1. event: 이벤트 객체 2. event.target: 현재 발생한 event의 target
  //event.target.value: 해당 target의 value 속성 (input element의 값)
 

  const handleSubmit = (event) => {
    aler('입력한 이름: ' +value);
    event.preventDefault();
  }
  
  return(
    <form onSubmit={handleSubmit}>
      <label>
        이름:
        <input type="text" value={value} onChange={handleChange}/>
      </label>
      <button type="submit">제출</button>
   </form>
  )
}

//value에 들어 있는 값=> react component state에서 값을 가져와 넣어줌
//onChange: 입력 값이 변경되었을 때 호출 


// 사용자의 입력을 직접적으로 제어할 수 있음!!!!
//ex) 모든 입력값을 대문자로 변경

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