• 최초 생성자 : J173_임재욱
• 수정자

설명

• Form 태그를 쉽게 관리하기 위해 제작하였습니다.
• 유효성검사를 고려합니다.
• ref를 사용하지 않습니다.
  • 성능을 개선하기 위해서 ref 사용을 고려하고 있습니다.

사용법

const { 
	data,
  errors,
  isLoading 
	handleChange, 
	handleSubmit 
} = useForm({
        initState,
        onSubmit,
        validate,});

return(
	<Form onSubmit={handleSubmit}>
		<input name="name" onChange={handleChange}
		// ..
	</Form>
)

Parameter

• initState : 트랙킹 된 데이터의 초기값을 선언할 수 있습니다.
• validate : 유효성 검사를 위한 콜백 함수입니다.
• onSubmit : 유효성 검사를 통과한 경우 실행되는 콜백함수입니다.

Returned data

• data : handleChange로 트랙킹 되고 있는 데이터들입니다.
• errors : 유효성 검사를 통과하지 못한 데이터들입니다.
• isLoading : 유효성 검사의 진행 상태를 나타냅니다.
• handleChange : input 엘리먼트의 onChange 이벤트를 등록해 주어야 데이터를 트랙킹 할 수 있습니다.
• handleSubmit : Form 엘리먼트의 onSubmit 이벤트에 등록해 주어야 정상적으로 동작합니다.