[React] 정신나가도록 좋은 react-hook-form 기능들 + typeScript

목적

react-hook-form 에 대해서 설명, 얼마나 유용한지

 

간단한 input과 console.log 찍기 // 일반 js

function TodoList() {
	const [toDo, setTodo] = useState("")
	const [toDoError, setTodoError] = useState("");
	const onChange = (event: React.FormEvent<HTMLInputElement>) => {
		const {
			currentTarget: { value },
		} = event;
		setTodoError("");
		setTodo(value);
	}
	const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
		event.preventDefault();
		console.log(toDo);

		if (toDo.length < 10) {
			return setTodoError("To do should be longer");
		}
	};


	return (
		<div>
			<form onSubmit={onSubmit}>
				<input onChange={onChange} value={toDo} placeholder='Write a to do' />
				<button>Add</button>
				{toDoError ? toDoError : null}
			</form>
		</div>
	);
}

export default TodoList;

 

 

함수

1. const { register } = useForm()

// 사용하려는 input에 적용
<input {...register( keyname)} />


// js로 required 즉, 필수항목 설정
<input {...register( keyname, { required: true})} />


// minLength 사용과 value, message 기능
<input {...register( keyname, { required: true, minLength: {
	value: 5,
	message: "이메일이 너무 짧다"
}})} />

 

• register을 입력하여 react-hook-form을 사용하겠다는 것
• value, state, onChange 등 다양한 기능들을 대신 수행해준다.
• js로 required를 설정하는 이유는 HTML은 수정될 가능성이 있기 때문

 

2. const { handleSubmit } = useForm()     /    onValid (이름 변경가능)

const { handleSubmit } = useForm()

const onValid = (data : any) => {
	console.log(data);
}

<form onSubmit={handleSubmit(onValid)}>
	<input required /> 
	<input required /> 
	<input required /> 
	<input required /> 
	<input required /> 
    <button> 제출 </button>
</form>

 

 

3. const { watch } = useForm()

• 실시간 감지 함수 value 값이 다른곳에 실시간으로 떠야한다면 사용해야할 함수
• 혹은 변화를 감지하는 함수
• 해당 함수로 정규식 유효성 검사를 해야하나 싶었지만 아래 formState로 인하여 필요가 없어졌다

 

4. const { formState: { errors }} = useForm()

const { register, handleSubmit, formState: { errors } } = useForm()

const onValid = (data : any) => {
	console.log(data);
}

<form onSubmit={handleSubmit(onValid)}>
	 <input {...register("ID", 
				{ required: "필수",
				  pattern: {
						value: /^[A-Za-z0-9._%+-]+@naver.com$/,
						message: "네이버만 입력해야함",
					}})} />
     <span> {errors?.ID?.message} </span>
     
     <input {...register("email", { required: "적으슈" })} />
     <span> {errors?.email?.message} </span>
     
     <input {...register("password", { required: "적으슈" })} />
     <span> {errors?.password?.message} </span>

    <button> 제출 </button>
</form>

 

• formState를 선언하고 상단과 같이 적는다면
• 유효성 검증 실패를 했을 경우 span 태그 내에 적으슈가 등장
• value를 입력하여 검증해야할 정규 표현식을 사용할 수 있고
• message를 설정하여 보여줄 수 있다.

 

5. const { setError } 

• onValid 내부에서 에러를 수동적으로 발생 시키기 위한 함수
• 하나의 input 에러 체크뿐만 아닌 2개의 input (ex 비밀번호, 비밀번호 확인)을 비교하면서 체크
• register 내부에서 에러를 발생 시키는 것이 아니기때문에 Focus가 해당 에러 input으로 이동하지 않지만
• shouldFocus : true를 이용하여 포커싱을 할 수 있음

const onValid = (data: IForm) => {
		if (data.Password !== data.Passwordconfirm) {
			setError("Passwordconfirm",
				{ message: "비밀번호가 다릅니다." },
				{ shouldFocus: true })
		}
		setError("extraError", { message: "server offline" })
       // 해당 코드 한 줄로 강제 에러를 만들어 낼 수도 있음
	}

 

6. const { setValue }

• 정상적으로 에러 호출 없이 진행이 되었을 때 setValue를 이용해서 빈 값을 넣어주거나
• 다른 값을 넣어 줄 수 있는것

	const onValid = (data: IForm) => {
		setValue("toDo", "");
	}

• register 에서 toDo라는 이름을 가진 객체를 빈값으로 만든다.

 

7. react-hook-form defaultValues, typeScript, validata

interface IForm {
	email: string;
	FirstName: string;
	LastName?: string;
	// 필수가 아니라면 물음표
	Username: string;
	Password: string;
	Passwordconfirm: string;
}


const { register, handleSubmit, formState: { errors } } = useForm<IForm>({
		defaultValues: {
			email: "@naver.com",
		}
	});
    
    
 function Login(){
 	...
	<input {...register("FirstName", {
			required: "적으슈",
                    
			// 예시 1번
			validate: (value) => value.includes("Young") ? "Young 은 안된다" : true,
					
			// 예시 2번
			validate: {
				noYoung: async (value) => value.includes("Young") ? "Young 은 안된다" : true,
				noJin: (value) => value.includes("Jin") ? "Jin도 안된다" : true,

			}
	})} placeholder='First Name' />

 }

 

• defaultValues: { } 를 설정한다면 key값이 email인 input에 @naver.com 이 적혀져있는 것을 볼 수 있다.
• typeScript를 이용하여 각 항목에 대하여 타입도 정해줄 수 있다.
• validata 를 이용하여 특정문자를 입력 불가능하게 하고 경고 문구를 생성할 수 있음