사용자로부터 입력을 받고 이 데이터를 전송하는!예를 들어 로그인이나 회원가입과 같은 기능에는 주로 폼을 사용한다! 그리고 리액트에서는 react-hook-form 라이브러리를 주로 사용한다.

Hook Form

• React에서 효율적으로 폼을 관리할 수 있게 해준다.
  • 폼의 상태 관리와 유효성 검사를 간단하게 만들어 준다!
  • npm install react-hook-form

//useForm 을 import해서 사용한다.
import { useForm } from "react-hook-form";

//useForm는 useState처럼 배열로 가져오지 않는다. 객체구조분해로 가져온다.
//사용할 것들을 객체구조분해로 가져온다.
export default function SignUp() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  }= useForm();

//formState : 정규식을 만족하지 못하면 error에 담긴다.

register

• 입력 요소에 연결하기 위한 함수. 이 함수를 통해 입력 요소에 유효성 검사 규칙을 설정해준다.
• 입력 또는 선택 요소를 등록하고 React Hook Form에 유효성 검사 규칙을 적용할 수 있다.
  • name="", pattern="", required로 필수값 지정, 알림메시지 처리도 가능하다.
• spread를 사용해서 작성 해준다. {...register()}

//---방법 1 (minLength 부분 참고 - 이렇게 해도 되고)
<input
	type="text"
  placeholder="이름"
  {...register("username", {
	  required: "이름은 필수값입니다.",
	  minLength: 2,
	})}
/>
//---방법 2 (minLength 부분 참고 - 특정 부분에 대해 메시지도 설정 가능)
<input
	type="text"
  placeholder="이름"
  {...register("username", {
	  required: "이름은 필수값입니다.",
	  minLength: {
	  value: 2, //최소값 지정
	  message: "이름은 두 글자 이상 입력해야 합니다.", //최소값을 만족하지 못했을 때 보여주는 메시지
		},
	})}
/>
//정규식 패턴 사용
<input
  {...register("test", {
    pattern: {[A-Za-z]{3}/
  value:}
message:

handleSubmit

• 폼의 제출을 처리하기 위한 함수이다. 이 함수에 전달된 콜백은 유효성 검사를 통과한 데이터를 인자로 받아 실행시킨다.
• handleSubmit(onValid[,onInValid]) 의 형태이다.
  • onVaild : 폼을 정상적으로 제출할 수 있는 상태일 때 실행시킬 함수
  • onInVaild: (선택값)폼을 제출할 수 없을 때 실행시킬 함수

import { useForm } from "react-hook-form";

export default function SignUp() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm();

  const onVaild = (data) => {
    console.log("성공", data);
  };
  const onInVaild = (err) => {
    console.log("실패", err);
  };

  return (
    <>
      <form onSubmit={handleSubmit(onVaild, onInVaild)}>
        <input
          type="text"
          placeholder="아이디"
          {...register("ID", {
            required: "아이디는 필수값입니다.",
          })}
        
        <button type="submit">회원가입</button>
       
      </form>
    </>
  );
}

watch

• 특정 폼 필드의 값을 실시간으로 관찰하는 함수이다.
  • 예를 들어 input 태그에 text를 작성하면 어떤 내용을 작성하는지 실시간으로 보여준다.

import { useForm } from "react-hook-form";

export default function SignUp() {
  const {
    watch,
    formState: { errors },
  } = useForm();

console.log(watch("ID")); //ID 요소 관찰

formState , Error 메시지 띄우기

• 폼의 상태를 나타내는 객체이다. ex) errors, isValid, isDirty, isSubmitted 등의 상태를 포함)

export default function SignUp() {
  const {
    register,
    formState: { errors },
  } = useForm();

...
return (
    <>
...

<input
		type="text"
	  placeholder="아이디"
	  {...register("ID", {
	  required: "아이디는 필수값입니다.",
	 })}
/>
{errors.ID?.message}
	</>
)

{/* errors.ID가 존재한다면 메시지를 띄워준다 */}
{/* 존재한다면 undefinded가 되기 때문에 안보이게 된다. */}

radio, select 예시

//return 이전에 선언 하고 아래에서 사용 (register 밖으로 빼는 방식)
const genderRegister = register("gender", {
    required: "성별은 필수값입니다",
  });

//radio 예시
<label htmlFor="gender-men">
	<input
		type="radio"
		value="남"
		id="gender-men" {...genderRegister} /> 남
</label>
<label htmlFor="gender-women">
   <input
     type="radio"
     value="여"
     id="gender-women" {...genderRegister}/> 여
</label>
{errors.gender?.message}

//select 예시
<select {...register("option", { required: "옵션은 필수값입니다." })}>
	<option value="">옵션</option>
  <option value="option-1">옵션1</option>
  <option value="option-2">옵션2</option>
  <option value="option-3">옵션3</option>
</select>
{errors.option?.message}