폼 다루기 - controlled component

💡 Controlled Component에서는 value 속성으로 React 상태를 연결하고, onChange로 상태를 업데이트해야 합니다. value만 설정하면 읽기 전용이 되어 버립니다.

💡 체크박스의 현재 상태는 event.target.checked(boolean)로 가져옵니다. value는 텍스트 입력에 사용됩니다.

💡 input의 name 속성을 event.target.name으로 읽고, setForm(prev => ({...prev, [name]: value}))처럼 computed property name을 사용하면 하나의 핸들러로 모든 필드를 처리할 수 있습니다.

💡 폼 제출 시 기본 동작은 페이지 새로고침입니다. event.preventDefault()를 호출해 이 기본 동작을 차단해야 React에서 폼 데이터를 처리할 수 있습니다.

💡 텍스트 입력의 초기값은 반드시 빈 문자열 ''로 설정해야 합니다. null이나 undefined를 초기값으로 사용하면 React가 해당 input을 Uncontrolled로 인식하여 경고가 발생합니다.