React-hook-form

회원가입,로그인 기능을 구현할때 React-hook-form 을 사용하면 훨씬 편하고 성능면에서도 좋다고해 어떤점에서 편하고 좋은지 알아보고 사용하려고 한다 

React-hook-form 은 기본적으로 비제어 컴포넌트 로 동작한다고 한다 

💡비제어 컴포넌트란?
폼 요소의 상태(state)를 직접 제어하지 않고, DOM 자체에서 값을 가져오거나 조작하는 컴포넌트 방식이다
비제어 컴포넌트는 폼 요소의 값을 사용자 입력에 따라 자동으로 업데이트하거나, 값을 가져와서 필요에 따라 처리할 수 있다
💡제어 컴포넌트란?
리액트의 상태(state)를 사용하여 사용자 입력을 관리하는 컴포넌트이다
사용자 입력에 따라 컴포넌트의 상태가 업데이트되고, 상태의 변경에 따라 렌더링이 다시 수행된다

 

제어컴포넌트 vs비제어 컴포넌트

React Hook Form을 사용하는 이유

• 간편한 사용성:사용이 간단하고 직관적이면 필요한 Hook과 메서드를 가져와 사용하면된다 상태(state)대신 Hook을  사용하여 폼 값을 추적하므로 코드가 더 간결하고 가독성이 좋다
• 최적화된 렌더링 :필요할 때만 리렌더링되도롤 최적화 되어 있다,각각의 폼 필드에 대한 컴포넌트의 리렌더링을 제한하여 성능을 향상시킨다
• 유효성 검사 지원:내장된 유효성 검사 기능을 제공한다 ,간단한 유효성 검사 규칙을 설정하면 자동으로 오류 메세지를 처리하고 폼 필드를 검증한다
• 외부 라이브러리 통합:외부라이브러리와 통합하기가 쉽다,외부라이브러리와 함께 비네어 컴포넌트를 사요하여 필드 값을 가져올 수있다
• 커스터마이즈 가능성:옵션과 확장성을 제공한다, 필요에 따라 커스텀 벨리데이터 (validator)를 작성하거나 커스텀 훅(custom hook)을 만들어서 사용할 수있다.
• TypeScript 지원: React Hook Form은 TypeScript를 완전히 지원하여 타입 안정성을 보장한다 타입 시스템을 활용하여 컴파일 타임에 오류를 발견할 수 있다

 

react-hook-form에서 메소드들

1. register: 폼 필드를 등록하여 폼 상태를 추적하고 유효성 검사를 수행할 수 있게 한다 register 함수를 사용하여 폼 필드의 이름(name)과 필요한 유효성 검사 규칙을 설정
2. handleSubmit:  폼 제출(submit) 이벤트를 처리하기 위한 핸들러이다  폼 제출 시 실행할 함수를 인자로 받는다
3. watch: 특정 폼 필드의 값을 실시간으로 감시(watch)할 수 있다  특정 폼 필드의 값을 가져온다
   
4. formState:폼 상태에 관련된 정보를 제공하는 객체이다
   errors: 유효성 검사 오류에 관련된 정보를 포함하는 객체이다 각 폼 필드에 대한 오류 메시지를 확인할 수 있다 폼 필드 이름을 키로 사용하여 해당 필드의 오류 상태를 확인한다 
   isDirty: 사용자가 폼 내의 어떤 필드라도 수정했는지 여부를 나타내는 불리언 값이다
   isSubmitting: 폼 제출(submit)이 진행 중인지 여부를 나타내는 불리언 값
   isValid: 전체 폼의 유효성 상태를 나타내는 불리언 값 폼의 모든 필드가 유효한 경우 true를 반환하고, 하나 이상의 필드가 유효하지 않은 경우 false를 반환한다
   isSubmitSuccessful: 폼 제출이 성공했는지 여부를 나타내는 불리언 값 ,폼 제출 후 성공적으로 처리되었을 때 true를 반환하고, 그렇지 않은 경우 false를 반환한다
   submitCount: 폼 제출 횟수를 나타내는 숫자 값, 폼이 제출될 때마다 값이 증가한다
5. mode:폼의 동작 모드를 설정하는 데 사용한다
   onSubmit(기본값): 폼 제출 시에만 유효성 검사가 실행된다,사용자가 필드를 편집할 때마다 실시간으로 유효성 검사를 수행하지 않는다
   onChange: 사용자가 폼 필드를 편집할 때마다 해당 필드의 유효성 검사가 실행된다, 필드가 변경될 때마다 실시간으로 유효성 검사를 수행
   onBlur: 사용자가 폼 필드에서 포커스를 제거할 때 해당 필드의 유효성 검사가 실행된다 필드가 포커스를 잃을 때마다 실시간으로 유효성 검사를 수행
   

import {useRef, useState} from "react";
import styles from "../style/signup.module.scss";

import {useForm} from "react-hook-form";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
const Signup = () => {
  const {
    register,
    handleSubmit,
    watch,
    formState: {isValid, errors},
  } = useForm({mode: "onChange"});

  const onSubmit = (data) => console.log(data);
  const password = useRef({});
  password.current = watch("password", "");

  const validatePassword = (value) => {
    if (value !== password.current) {
      return "비밀번호가 일치하지 않습니다";
    }
    if (errors.passwordConfirm) {
      errors.passwordConfirm.message = "비밀번호가 일치하지 않습니다";
    }
    return true;
  };
  const [isShow, setIShow] = useState(false);
  const see = () => {
    setIShow((cur) => !cur);
  };
  return (
    <div className={styles.signup}>
      <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
        <h1>회원가입</h1>
        <input
          name="email"
          placeholder="이메일"
          {...register("email", {
            required: "이메일을 입력해주세요",
            pattern: {
              value: /\S+@\S+\.\S+/,
              message: "이메일 형식에 맞지 않습니다.",
            },
          })}
        />
        {errors.email && <small>{errors.email.message}</small>}

        <input
          type={isShow ? "text" : "password"}
          name="password"
          placeholder="비밀번호"
          {...register("password", {
            required: "비밀번호를 입력해주세요",
            minLength: {
              value: 8,
              message: "최소 8자 이상의 비밀번호를 입력해주세요",
            },
          })}
        />
        {errors.password && <small>{errors.password.message}</small>}
        <span className={styles.see} onChange={see}>
          <FontAwesomeIcon icon="fa-light fa-eye-slash" />
          <label>
            <span>비밀번호 표시</span>
          </label>
        </span>
        <input
          type="password"
          name="passwordConfirm"
          placeholder="비밀번호 확인"
          {...register("passwordConfirm", {
            validate: validatePassword,
          })}
        />
        {!isValid && errors.passwordConfirm && <small>{errors.passwordConfirm.message}</small>}
        <button type="submit" disabled={!isValid}>
          회원가입
        </button>
      </form>
    </div>
  );
};

export default Signup;