개발공부 74일차 TIL React-hook-form 버튼 활성화

오늘 한 작업들 

 

목격,실종,공공데이터 부분 디테일 페이지에 지도 뿌리고 위치에마커찍기 기능구현 

목격, 실종 작성 부분 카카오맵 로직 컴포넌트화 시킴

목격, 실종 작성시 필요값 입력시 버튼활성화 기능 구현 

SIgnIn 부분 코드 react-hook-form으로 리팩토링 및 필수 값 입력시 로그인 버튼 활성화 

 

 

오늘의 어려움 

 

 React-hook-form 사용한 form 에서 원하는 값을 입력시 버튼 활성화 하는 로직 

 

const Signin = () => {

    const { register, 
            handleSubmit, 
            formState: { errors },
            reset,
            resetField,
            watch,
        } = useForm<LoginFormValues>();

        const [isActive, setIsActive] = useState<boolean>(false);
        const watchAll = Object.values(watch());
      
        // 의존성배열에 값이 변하기 생기면 useEffect안에 있는 코드가 실행 
		// react-hook-form으로 설정한 input 값이 다 입력이 되어 있으면 state값이 true로 반환
        useEffect(() => {
          if (watchAll.every((el) => el)) {
            setIsActive(true);
          } else {
            setIsActive(false);
          }
        }, [watchAll]);
        
      ...
      

  return (
   	...
        <LoginInputBox>
            <div>
                <span>아이디</span>
                <input
                   type="text"
                   id="id"
                   placeholder='아이디 입력'
                   {...register('id', { required: true })}
                    />
            </div>

            <div>
                 <span>비밀번호</span>
                 <input
                   type="text"
                   id="pw"
                   placeholder='비밀번호 입력'
                   {...register('pw', { required: true })}
                    />
            </div>
        </LoginInputBox>

        <LoginButtonBox>
        // state를 사용해서 isActive 조건에 따라 사용자에게 보이는 버튼을 다르게 구현
        {isActive === false ? (
            <SignButtonBefore>
              회원가입
            </SignButtonBefore>
          ) : (
            <button type="submit" >
              회원가입
            </button>
          )}
      ...

---

참고자료 

 

https://velog.io/@e_juhee/watch-getValues

React hook form의 watch를 이용해서 입력 여부 확인하기

 

 

https://velog.io/@imnamesol/react-hook-form-%EC%97%90%EC%84%9C-watch%EB%A1%9C-%EB%93%B1%EB%A1%9D-%EB%B2%84%ED%8A%BC-%ED%99%9C%EC%84%B1%ED%99%94-%ED%95%98%EA%B8%B0

react-hook-form 에서 watch로 등록 버튼 활성화 하기