react-hook-form | formState

	<form onSubmit={handleSubmit(onClickSignUp)}>
    	<S.Inputs
			type='text'
			placeholder='@를 포함한 이메일을 입력해주세요'
			{...register("email")}/>
                   
       	<S.Inputs
			type='password' 
            placeholder='8자리 이상 비밀번호를 입력해주세요'
            {...register("password")}/>

		<S.Inputs 
			type='text' 
			placeholder='닉네임을 입력해주세요'
			{...register("name")}/>

		<S.SignUpBtn>회 원 가 입</S.SignUpBtn>
	</form>

[상황]

• react-hook-form과 yup으로 작성했다.
• input창에 값이 올바르게 다 들어오면 버튼 배경색을 테마색으로 채워주고 싶었다.
• state와 onChange함수로 했을 때는 값이 들어와 있는지 없는지 알 수 있었는데,
• react-hook-form으로 적었을 때는 값이 들어와 있는지 없는지 확인 방법을 몰랐다.

---

[해결방법]

다행히도 formState 에 보면 isValid라는 기능이 있다.

hookform으로 지정한 input들 값이 에러없이 다 잘 들어가 있으면 true을 반환하고, 그렇지 않으면 false를 반환한다.

사용 방법으로는

// container파일에서
	<S.SignUpBtn isActive={formState.isValid}>회 원 가 입</S.SignUpBtn>

/* css 파일에서 */
	background-color: ${(props:BackColorProps) => props.isActive ? "rgba(30, 130, 76)" : "white"};

---

이렇게 하면 잘 작동된다!
useState를 사용했을 때보다 코드 길이도 훨씬 줄어들고 state값을 일일이 저장하지 않아 속도도 빠르다.