input 에 값을 입력받고 POST 를 할 때까지 값을 들고 있는 역할을 useState 에 맡겼었다. 처음에는 문제가 없었는데, 페이지가 많아지다보니 값을 입력할 때마다(change event가 발생할 때마다) 화면이 깜빡이는 문제가 발생했다. state가 변경될 때마다 화면이 깜빡여서 제대로 입력할 수 없는 상황이었다.

이 문제를 해결하기 위해 useRef 를 통해 관리하는 방법을 사용하려했는데 결국 이 방법도 state를 사용해야 했다. 그러던 중 로그인과 회원가입 페이지에 사용했던 React Hook Form 라이브러리를 떠올리게 되었다. 이게 왜 이제야 떠올랐는지…

🐇 Typescript에서 사용 방법

사용법은 매우 간단하다. useForm hook으로 register와 handleSubmit을 선언하고, 다음과 같이 입력해준다.

• handleSubmit 특이한 점은 onSubmit 속성 안에 handleSubmit 함수가 곧장 선언된다는 것이다. 함수의 인자로는 두 가지가 들어갈 수 있는데, 첫 번째는 input에 들어온 값이 valid할 때 실행되는 함수, 두 번째는 invalid할 때 실행되는 함수이다. 조건을 걸어주는 방법은 밑에서 설명할 것이다.
  
• register input에는 register를 속성으로 주면 되는데, 인자로 이 input의 이름을 넣어준다. form이 제출되면 onValid가 호출되고, 인자로 input에 입력된 값이 해당 이름의 변수로 주어지게 된다.
  
• setValue input의 값을 임의로 변경하고 싶을 때 사용한다. 여기서는 onValid를 통해 약속을 생성한 뒤 input을 비워주었다.
  

interface IPromiseName {
	promiseName: string;
}

function Promise() {
	const { register, handleSubmit, setValue } = useForm<IPromiseName>();
	
	const onValid = ({promiseName}: IPromiseName) => {
		// ...
		setValue("");
	}
	
	return (
		<form onSubmit={handleSubmit(onValid)}>
			<input {...register("promiseName")} />
			<button type="submit">생성</button>
		</form>
	);
}

🐇 input Validation 처리

• handleSubmit handleSubmit의 두 번째 인자는 입력한 input 값이 조건에 맞지 않을 때 호출되는 함수이다.
  
• register register의 인자로 조건을 넣어 validation 처리를 할 수 있다. required, maxLength, max 등 다양한 조건을 걸 수 있다.
  

interface IPromiseNameInvalid {
  promiseName?: {
    message?: string;
  };
}
function Promise() {

	// ...	

	const onInvalid = ({promiseName}: IPromiseNameInvalid) => {
		alert(promiseName.message);
	}
	return(
		<form onSubmit={handleSubmit(onValid, onInvalid)}>
			<input 
				{...register("promsieName", {
					required: "약속 이름을 입력해주세요.",
					maxLength: {
	          value: 20,
	          message: "약속 이름은 20자 이하여야 합니다.",
	        },
				}}
			/>
		</form>
	);
}