7 REACT HOOK FORM

7.0 Introduction
일단 잠깐 쉬고 form만드는 짓을 해보자.
form은 너무 귀찮음.
React Hook Form package 써보자.


7.1 Making Forms Alone
npm i react-hook-form (React18)
npm i react-hook-form --legacy-peer-deps(React18이전)
일단 깔았고, 
이거 안깔고 하면 좋은 UX를 위해 할 일이 너무 많음을 보여줌.

7.2 The Register Function

//기존
export default function Forms(){
    const [username, setUsername] = useState("");
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [formErros, setFormErros] = useState("");
    const onUsernameChange = (event:React.SyntheticEvent<HTMLInputElement>)=>{
        const {currentTarget: { value }} = event;
        setUsername(value);
    }
    const onEmailChange = (event:React.SyntheticEvent<HTMLInputElement>)=>{
        const {currentTarget: { value }} = event;
        setEmail(value);
    }
    const onPasswordChange = (event:React.SyntheticEvent<HTMLInputElement>)=>{
        const {currentTarget: { value }} = event;
        setPassword(value);
    }
    const onSubmit = (event:React.SyntheticEvent<HTMLFormElement>) =>{
        event.preventDefault();
        console.log(username,email,password)
    }
    return (
        <form onSubmit={onSubmit}>
            <input required minLength={5} value={username} onChange={onUsernameChange} type="text" placeholder="Username"/>
            <input required value={email} onChange={onEmailChange}  type="email" placeholder="Email"/>
            <input required value={password} onChange={onPasswordChange}  type="password" placeholder="Password"/>
            <input type="submit" value="Create Account"/>
        </form>
    );

}

 

input을 state에 연결해주는 것.

7.3 Validation

 

7.3 Validation part Two

가능한 validation options

7.3 Errors - Custom validation 만들기.

기본은 onSubmit, onBlur = 해당input exit하면 메시지 보여줌, onChange = input 바뀔 때마다

7.4 Extras
https://react-hook-form.com/api/useform

여기가면 많다.

// Wishes
// Less code (checked)
// Better valiation (checked)
// Better Erros(set, clear, display)
// Have full control over inputs
// Don't deal with events (checked)
// Eaiser Inputs (checked)

import { useForm } from "react-hook-form";
import { FieldError } from "react-hook-form/dist/types";

interface LoginForm {
    username: string,
    password: string,
    email: string,
    errors? : string,
}

export default function Forms(){
    const {
        register,
        handleSubmit,
        formState: { errors },
        watch,
        setError,
        setValue,
        reset,
        resetField,
    } = useForm<LoginForm>({mode: "onChange"});
    const onValid = (data: LoginForm) =>{
        console.log("I'm valid");
        // setError("errors", {message:"backend is offline sorry"})
        //fetch()같은거 하고 난 다음에
        // setError("username", {message:"Taken username"})
        // reset(); // 다 리셋하게
        resetField("password"); //password 필드만 리셋하게

    }
    const onInvalid = (errors: FieldError) =>{
        // console.log(errors)
    }
    // console.log(errors)
    // console.log(watch("email")) //하나 필드만 볼 수 있음. arg없으면 전체 봄.
    return (
        <form onSubmit={handleSubmit(onValid, onInvalid)}>
            <input
                {...register("username", {
                    required: "username is required",
                    minLength: {
                        message:"The username should be longer than 5 chars",
                        value: 5,
                    }
                })}
                type="text"
                placeholder="Username" 
            />
            {errors.username?.message}
            <input
                {...register("email", {
                    required: "email is required",
                    validate: {
                        notGmail: (value) => !value.includes("@gmail.com") || "Gmail is not allowed",
                    }
                })}
                type="email"
                placeholder="Email" 
                className={`${Boolean(errors.email) ? "bg-red-500" : ""}`}
            />
            {errors.email?.message}
            <input
                {...register("password", {
                    required: "password is required",
                })}
                type="password"
                placeholder="Password" 
            />
            <input type="submit" value="Create Account"/>
            {errors.errors?.message}
        </form>
    );
}