리액트 react-hook-form input 비어있을 때 button disabled 적용

리팩토링 이후 데모

 

input이 비어있을때 + 유효성 검사를 모두 통과하기 전에는 로그인 버튼이 disabled 되어 버튼을 누를 수 없다.

모든 유효성 검사를 통과해야지 로그인 버튼에 불이 들어오고 로그인 버튼을 클릭해서 서버에 로그인 요청을 보낸다. 

 

이번 프로젝트에서는 로그인, 회원가입 기능 구현시 유효성 검사가 필요한 모든 input창을 useState hook 상태로 관리할 필요없이,  react-hook-form 라이브러리를 도입해서 form을 완성했다. react-hook-form을 사용하면 서버로 통신이 가기 이전에 클라이언트에서 해야되는 유효성검사를 쉽고 간단한 코드로 짤 수 있다는 장점이 있다.

react-hook-form 라이브러리 공식 문서의 타이틀도 Simple React forms validation 이다. 그만큼 form을 개발할때 validation에 최적화할 수 있는 라이브러리라는 뜻

 

리팩토링 이전 이슈 

필수 입력 비어있는 상태에서 로그인 버튼 누르기

 

하지만 hook form을 처음 공부하니 절대 쉽지만은 않았는데..

내가 원하는대로 작동이 안되는 경우가 꽤 있었는데 대표적인 예가 input이 아예 비어있는 경우에 처리하는 방법이다. 상단에 리팩토링 이후 데모처럼 원래는 input이 비어있을 때는 유효성 검사가 모두 통과해야 로그인 버튼에 불이 들어오게 하고 싶었는데, 프로젝트가 끝날때까지 이부분을 신경을 못써서 우선은 이 상태로 배포를 했었다. 

즉, 이전 코드는 input값이 empty여도 버튼이 눌러지고, 비어있는 data 객체  {email: '', password: ''} 정보로 서버에 post 요청까지 보내는 비효율적인 문제가 있었다. 그러니 이 상태에서는 서버 db에는 당연히 비어있는 email과 패스워드 정보가 없고! 서버는 정보가 일치하지않으니 에러메시지를 주고, 클라이언트에서도 그 에러로 인식하여 에러메시지  "아이디 혹은 비번이 일치하지 않는다" 를 보여주는 작은 이슈가 있었다.  

 

리팩토링 이후 코드

 

  const {
    register,
    handleSubmit,
    formState: { isSubmitting, errors, isValid },
  } = useForm({ mode: "onChange" });

 

useForm 에 onChange 모드를 주면 실시간 유효성 검사를 하게되고 errors객체 또한 실시간으로 업데이트 된다. 

 

        <input
          autoFocus
          id="email"
          type="email"
          name="email"
          placeholder="이메일을 입력해주세요"
          {...register("email", {
            required: true,
            pattern: {
              value: /\S+@\S+\.\S+/,
              message: "올바른 이메일 형식이 아니에요",
            },
          })}
        ></input>

 

이메일과 비밀번호 input register에 모두 required: true 를 추가해서 필수 조건으로 만든다. 

 

<Button disabled={!isValid || isSubmitting}>

 

버튼에 disabled 속성을 추가해주고,

!isValid - 에러가 있는 경우에 (유효성 검사에 하나라도 걸리면 errors 객체에 값이 생겨서 isValid 상태는 false가 된다)

isSubmitting - 폼을 제출 중일때

비활성화 시킨다.

 

  &:disabled {
    background-color: var(--gray-300);
    cursor: none;
  }

 

물론 Button CSS에도 disabled 속성을 준다. 

커서가 아예 안생기게 해주고 버튼 컬러도 회색으로 바꿔준다.

 

 

전체 코드

//LoginForm.js

import axios from "axios";
import { useForm } from "react-hook-form";
import Button from "../../common/Button";
import { LogInFormContainer } from "./LogInFormStyle";
import { Link, useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { setWarningToast, setNoticeToast } from "../../../features/toastSlice";

const LogInForm = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch(); //for redux dispatch
  const {
    register,
    handleSubmit,
    formState: { isSubmitting, errors, isValid },
  } = useForm({ mode: "onChange" });
  //isValid: errors 객체 비어있으면 true
  
  const onSubmit = (data) => {
    // console.log(data); //{email: 'test@email.com', password: '비번정보'}
    // 로그인 요청
    axios
    	.post("/api/login", data)
        .then((response) => {// console.log(response); //{data: {…}, status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
   		  ...로그인 로직 생략...
          })
        .catch((error) => {
          console.log(error);
          if (error.response.status === 401) {
            // alert창 대체
            dispatch(
              setWarningToast({
                message: `아이디 혹은 비밀번호가 일치하지 않아요\n`,
             })
            );
          }
  	});
  }
  
  return (
    <LogInFormContainer>
      <form onSubmit={handleSubmit(onSubmit)}>
        <label>이메일</label>
        <input
          autoFocus
          id="email"
          type="email"
          name="email"
          placeholder="이메일을 입력해주세요"
          {...register("email", {
            required: true,
            pattern: {
              value: /\S+@\S+\.\S+/,
              message: "올바른 이메일 형식이 아니에요",
            },
          })}
        ></input>
        {errors.email && <span>{errors.email.message}</span>}
        
        <label>비밀번호</label>
        <input
          id="password"
          type="password"
          name="password"
          placeholder="비밀번호를 입력해주세요"
          {...register("password", {
            required: true,
            minLength: {
              value: 8,
              message: "비밀번호는 8자 이상이에요",
            },
          })}
        ></input>
        {errors.password && <span>{errors.password.message}</span>}
        <Button disabled={!isValid || isSubmitting}>
          로그인
        </Button>
      </form>
    </LogInFormContainer>
  );
};

export default LogInForm;

//Button.js

import styled from "styled-components";

export const Button = styled.button`
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: none;
  width: 300px;
  height: 35px;
  background-color: var(--fridge-500};
  color: var(--white);
  font-size: 16px;
  margin: 20px 0 0 0;
  &:disabled {
    background-color: var(--gray-300);
    cursor: none;
  }
`;

 

나의 경우 이렇게 바꿔주니 원하는대로 잘 작동하게 되었다. 

쉽고 간단하게 리액트 form을 구현할 수 있다는데 처음엔 생소하기도해서 이것저것 꽤나 애를 먹었는데, 누군가에게도 도움이 되었으면 좋겠다.