React - 유효성 검사 로직 만들기 + custom hook

React를 활용해서 Form을 만들어본다.

 

간단하게 이름과 이메일을 받아서 submit하는 form이다.

 

체크할 부분

-이름 빈칸인지 아닌지 확인

-이메일은 @가 들어갔는 확인

-클릭하고 넘어갈 때도 이름과 이메일 조건 맞는지 확인

 

import useValidate from "../hooks/use-validate";

먼저 useValidate라는 custom hook을 만들어준다.

 

	return {
		inputValue,
		onChangeHandler,
		onBlurHandler,
		isValid,
		className,
		reset,
	};

이 훅에 포함될 것은 위와 같다..

 

onBlur이 뭐냐면 처음에 input 박스 클릭하면 focus가 되는데 이 focus가 풀리면 Blur라고 한다.

input 입력하다가 다른 데 클릭하면 focus가 풀리면서 onBlur에 해당하는 함수가 실행되는 구조

 

	const [inputValue, setInputValue] = useState("");
	const [isTouched, setIsTouched] = useState(false);
	const [isFirstTouch, setIsFirstTouch] = useState(true);

이 훅에서는 3개의 state를 활용할 예정.

 

inputValue는 뭐 당연히 조작해야되고

isTouched는 애가 한 번이라도 조작됐는지 확인

isFirstTouch는 처음인지 아닌지만 체크

	const isValid = isFirstTouch ? true : isTouched && validate(inputValue);

처음 클릭이라면 조작됐는지와 조건에 부합하는지 판단

아니면 true를 반환하는데

이러면 처음에 모두 빈칸일 때 valid하다는 버그가 발생함.

이거는 나중에 처리할 예정.

 

	const onChangeHandler = (event) => {
		setIsFirstTouch(false);
		setInputValue(event.target.value);
		setIsTouched(true);
	};

	const onBlurHandler = () => {
		setIsFirstTouch(false);
		setIsTouched(true);
	};

	const reset = () => {
		setInputValue("");
		setIsFirstTouch(true);
	};

각각의 함수에 따라 state만 바꿔준다.

	const className = isValid ? "form-control" : "form-control invalid";

valid 여부에 따라 css를 다르게 설정하기 위해 만들어준다.

 

그리고 이제 커스텀 훅을 활용하는 페이지로 돌아오면

	const {
		inputValue: firstName,
		onChangeHandler: firstNameOnChangeHandler,
		onBlurHandler: firstNameOnBlurHandler,
		isValid: firstNameIsValid,
		className: firstNameClasses,
		reset: resetFirstName,
	} = useValidate((value) => value.trim() !== "");

커스텀 훅에서 리턴하는 애들을 내 맘대로 이름 붙여줌.

커스텀 훅 괄호 안에 쪼매난 함수가 있는데 빈칸인지 아닌지 확인하는 애

이 함수를 파라미터로 받아서 커스텀 훅 안에서 처리한다.

 

	const {
		inputValue: email,
		onChangeHandler: emailOnChangeHandler,
		onBlurHandler: emailOnBlurHandler,
		isValid: emailIsValid,
		className: emailClasses,
		reset: resetEmail,
	} = useValidate((email) => email.includes("@"));

이메일을 확인하는 부분 같은 경우에는

@가 들어가는지 아닌지 확인하는 함수를 파라미터로 넣어준다.

 

	let formIsValid = false;
	if (
		firstNameIsValid &&
		lastNameIsValid &&
		emailIsValid &&
		firstName.length !== 0 &&
		lastName.length !== 0 &&
		email.length !== 0
	) {
		formIsValid = true;
	}

그다음에 전체 form의 valid를 확인하는 변수를 선언하고 조건문으로 바꿔준다.

조건이 좀 길긴 한데 커스텀 훅에서 맨 처음 상태를 true라고 선언해주어서 각각의 valid + 길이도 확인해주는 코드를 넣어주었다.

별로 맘에 안 듦.

 

	const OnSubmitHandler = (event) => {
		event.preventDefault();
		if (!formIsValid) {
			return;
		}
		resetFirstName();
		resetlastName();
		resetEmail();
		console.log(
			`firstname : ${firstName} lastname : ${lastName} email : ${email}`
		);
	};

그리고 submit을 하면 formIsValid가 아니면 바로 함수 리턴으로 뒤에 내용을 실행 안하고

괜찮으면 input 다 비워주고 확인 차 콘솔로 표시

 

그리고 조건부로 에러 메시지까지 삽입하면 대충 이런식

버튼도 formIsValid랑 연동해서 disabled 조건을 추가해주었다.

 

유효성 검사하는데 생각보다 귀찮은 작업들이 많아서 당황했지만

그래도 각각의 input에 대해서 custom hook을 사용하는 좋은 연습이었다.

 

사실 이 모든 귀찮은 작업들은 당연히 미리 해놓은 사람이 있다.

https://formik.org/docs/overview

Overview | Formik

 

리액트를 활용한 form을 미리 만들어놓은 라이브러리이다. 

나도 이번에 처음 알게 됐는데 좀 둘러보니 괜찮은 듯.

검사할 로직만 내가 짜서 넣어주면 나머지는 얘가 알아서 다 해줌.