1. Form

: 사용자로부터 입력을 받기 위해 사용

• react에서의 Form : 컴포넌트 내부에서 state를 통해 데이터를 관리
• DOM에서의 Form : 엘리먼트 내부에 각각의 state가 존재

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

그래서 controlled component를 배워볼것임

2. Controlled Component

: 사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트(react가 통제하는 컴포넌트)

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

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

  const handleSubmit = (event) => {
    alert('입력한 이름: ' + value);
    event.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <button>제출</button>
    </form>
  )
}

직접적으로 제어한다는게 무엇이냐 하면

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

3. 다양한 Forms

1) textarea