Today Task
•
프로필 설정 페이지 중 Form 부분을 useState가 아닌, useForm이라는 hook을 사용하여 개발.
Trouble
•
본인은 현재 리액트에 대한 지식이 없고, 공부해나가면서 만드는 중임 → 이에 따라 트러블 슈팅의 기록을 공부한 내용을 정리 하는것으로 대체
1.
useState 공부를 하며 진행하던 중, useForm으로 구현된 코드를 보았고, 유효성검사때에 useForm을 사용하자는 의견이 많아 공부하기 시작.
Trouble Shooting
1. useForm이란? + 장단점
$npm -i react-hook-form
JavaScript
복사
•
value와 onChange로 각 입력 필드에 대한 처리를 추가할 필요없음
•
state를 직접 관리할 필요가 없음
2. 여러가지 객체
register
<input type="text" name="accountId" ref={register} />
JavaScript
복사
•
ref로 사용되는 함수로 입력 필드를 React Hook Form에 등록하고 변경 사항에 대해 값을 추적
•
다만, name속성이 있어야 함
handlesubmit
<form onSubmit={handleSubmit(onSubmit)}>
const onSubmit = (data) => {
console.log(data);
};
JavaScript
복사
•
form을 서버로 제출할 때 사용하는 함수
errors
<input type="text" name="accountId" ref={register({ required: true})} />
<input
type="password"
name="accountId"
ref={register({ required: true })}
/>
JavaScript
복사
•
유효성 검사를 포함하는 객체
3. 계속 공부중인 내용
validation
<Label htmlFor='accountId'>계정 ID</Label>
<IDInput
{...register('accountId', {
required: true,
pattern: {
value: /[a-zA-Z0-9_.]/,
message: '영문, 숫자, 밑줄 및 마침표만 사용할 수 있습니다.',
},
})}
/>
<S.WarningText isVisible={!!errors.accountId}>{errors.accountId?.message}</S.WarningText>
JavaScript
복사
