react-hook-form 설치 방법
npm install react-hook-formreact-hook-form의 주요 use 훅들
useForm
폼 상태 및 메서드를 설정한다.
기본적인 유효성 검사, 리셋, 제출 등을 관리한다.
const { register, handleSubmit, formState: { errors } } = useForm();register
- 입력 필드를 폼에 등록하고 상태를 관리한다.
- 각 필드의 유효성 검사 규칙을 설정할 수 있다.
<input {...register("name", { required: true })} />
// name 필드를 등록하고, 필수 입력으로 설정한다.handleSubmit
- 폼 제출 시 호출되는 메서드이다.
- 검증이 통과한 후 실행할 함수를 인자로 받는다.
const onSubmit = (data) => console.log(data);
// 폼이 제출될 때 호출되는 함수
<form onSubmit={handleSubmit(onSubmit)}>...</form>
// 폼 제출 시 데이터 검증을 수행하고, 검증이 통과하면 onSubmit 함수를 호출한다.watch
- 입력 필드의 값을 실시간으로 관찰한다.
- 특정 필드의 값을 가져올 수 있다.
const name = watch("name");
if (name.length > 8) {
console.error("이름은 8자 이하이어야 합니다.");
}
// 이런 식으로 실시간 검증을 구현할 수 있다.setValue
- 특정 필드의 값을 프로그래밍적으로 설정한다.
- 동적 데이터 로드 시 API 호출 후 받아온 데이터를 폼 필드에 자동으로 채우고 싶을 때
- 조건부 로직 사용자의 입력에 따라 다른 필드의 값을 업데이트할 때
- 리셋 기능도 가능하다. 특정 이벤트(클릭) 등으로 폼 값을 초기화할 때
setValue("title", existingPost.title);
setValue("content", existingPost.content);
// 포스트를 수정할 때, 기존의 값들을 불러와서 수정할 필요가 있을 때 setValue를 사용한다.reset
- 폼의 모든 필드 값을 초기 상태로 재설정한다.
reset();formState
- 폼의 상태(ex: 제출 상태, 유효성 검사 오류 등)을 관리한다.
const { isSubmitting, isValid, errors } = formState;
// isSubmitting은 폼이 제출 중인지 확인할 수 있어, 로딩 스피너를 표시하는데 유용하다.
// inVaild는 폼이 유효한지 확인하여 제출 버튼의 활성화를 제어할 수 있다.
// errors는 유효성 검사에서 발생한 오류를 확인하고, 사용자에게 오류 메시지를 보여줄 때 사용한다.field 객체
value : 현재 필드의 값
onBlur : 필드에서 포커스가 벗어났을 때 호출되는 함수
name : 필드의 이름
ref : 필드에 대한 React ref, Dom 요소에 직접 접근할 때 사용 가능
disabled : 필드의 비활성화 상태를 나타낸다.
onChange : 필드 값이 변경될 때 호출되는 함수
onFocus : 필드에 포커스가 갈 때 호출되는 함수
setValue : 필드의 값을 설정할 수 있는 함수
setError : 필드 에러를 설정할 수 있는 함수
clearError : 필드 에러를 지울 수 있는 함수
isDirty : 필드 값이 변경되었는지 여부를 나타내는 불리언 값
isTouched : 필드가 사용자에 의해 터치(상호작용) 되었는지 여부를 나타내는 불리언 값
'왜?'