8. 폼에 react-hook-form 사용하기

 

Home

▲ react-hook-form 공식문서

 

폼에 react-hook-form을 적용시켜 보았다.

react-hook-form은 폼의 유효성 체크를 쉽게 해주는 라이브러리로 사용해보니 코드의 양도 줄어들고 가독성도 올라갔다.

usestate로 state를 여러 개 만들어서 관리해주지 않아도 되니 편리했다.

 

우선 react-hook-form을 설치한다.

npm install react-hook-form

yarn add react-hook-form

 

가장 기본적인 형태는 아래와 같다.

const { register, handleSubmit } = useForm();

register는 입력값을 react hook form에 등록해주는 함수로 옵션을 사용하여 다양한 유효성 검증을 할 수 있다. 여기에 첫번째 인자로 넘겨주는 값은 name으로 이 값으로 form에 저장된 값을 불러올 수 있다.

handleSubmit은 2개의 인자를 받을 수 있는데, 첫번째 인자는 유효성 검사가 성공했을때 실행되는 함수로, 필수이고, 두번째 인자는 실패했을 때 실행되는 함수로, 생략 가능하다. 

 

우선 폼이 상대적으로 간단하게 생긴 로그인 컴포넌트에 적용을  해보았다.

import { Row, Col, Container, Button } from "react-bootstrap";
import Form from "react-bootstrap/Form";
import { useForm } from "react-hook-form";
import { Link } from "react-router-dom";

function Login() {
  const { register, handleSubmit, formState: {errors} } = useForm({mode: "onBlur" });

  const onSubmit = (data) =>{
    console.log("data::", data);
  };

  const onError = (errors) => {
    console.log("error::", errors);
  };
  
  return (
    <Container>
      <Form onSubmit={handleSubmit(onSubmit, onError)}>
        <Form.Group as={Row} className="mb-3" controlId="LoginID">
          <Form.Label column sm={3}>
            ID
          </Form.Label>
          <Col>
            <Form.Control 
              type="text" 
              placeholder="Enter ID" 
              {...register("uid",{
                required: "아이디를 입력해주세요.",
                pattern: {
                  value: /^[A-za-z]+[A-za-z0-9]{4,14}$/,
                  message: "아이디가 형식에 맞지 않습니다.(영문자+숫자 조합 5~15자)"
                }
              })}/>
          </Col>
          {errors.uid && (
            <Form.Text className="text-danger">
              {errors.uid.message}
            </Form.Text>
          )}
        </Form.Group>
        <Form.Group as={Row} className="mb-3" controlId="LoginPassword">
          <Form.Label column sm={3}>
            Password
          </Form.Label>
          <Col>
            <Form.Control 
              type="password" 
              placeholder="Password" 
              {...register("password",{
                required: "비밀번호를 입력해주세요.",
                pattern: {
                  value: /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,20}$/,
                  message: "비밀번호는 영문자+숫자+특수기호 조합 8~20자입니다."
                }
                })}/>
          </Col>
          {errors.password && (
            <Form.Text className="text-danger">
              {errors.password.message}
            </Form.Text>
          )}
        </Form.Group>

        <Form.Group>
          <Link to="/join" className="m-1 btn btn-outline-secondary">
            회원가입
          </Link>
          <Button className="m-1" variant="outline-secondary" type="submit">
            로그인
          </Button>
        </Form.Group>
        <Form.Group>
          <Link to="/findID" className="m-1">
            아이디 찾기
          </Link>
          <Link to="/findPW" className="m-1">
            비밀번호 찾기
          </Link>
        </Form.Group>
      </Form>
    </Container>
  );
}

export default Login;

아무것도 입력하지 않고 로그인을 눌렀을 때

유효성 검증에 실패해서 에러 메시지 떴을 때

나는 사용자가 폼을 제출하기 전에 유효성 검증이 되는 것이 더 편할 것이라 생각하여 useForm의 mode를 onBlur로 설정하였다. 이러면 해당 입력칸에서 포커스가 해제될 때 유효성 검사를 실시하게 된다. 실시간으로 유효성 검증을 하려면 onChange를 사용하면 된다.

 

회원가입 폼도 비슷하게 구성하였는데 비밀번호와 비밀번호 확인을 대조할 때 react-hook-form의 validate에 다음과 같은 함수를 넘겨주어 비밀번호와 비밀번호 확인이 같은지 체크하였다.

  // react-hook-form
  const {register, handleSubmit, formState:{errors}, getValues } = useForm({mode: "onBlur"});
  
  // 비밀번호 확인
  const pwChkValidateCheck = (value) => {
    const pw = getValues("password");
    const pwChk = getValues("pwChk");
    if(pw !== pwChk){
      return "비밀번호와 비밀번호 확인이 일치하지 않습니다";
    }
    else{
      return true;
    }
  };

getValues는 인자에 name을 넘겨주면 거기에 저장된 값을 리턴해준다.

 

여기서는 register, handleSubmit, formState, getValues 정도만 사용해봤는데 공식문서를 보면 더 많은 기능들이 있으니 잘 살펴보고 필요한 기능들을 사용하면 더 좋은 폼을 만들 수 있을 것 같다. react-hook-form은 공식문서가 잘 되어 있어서 좀만 읽으면 쉽게 사용할 수 있다!