react-hook-form

• React에서 form 을 다루는 라이브러리
• form validation 

Input 테그가 늘어나면 그 수만큼 변수 및 useState()를 생성해 줘야함
각 항목마다 일일이 검증이 필요함 

이 기능들을 간단하게 처리해 줄 라이브러리... 

 

까먹지 않게.. 1차 정리를 해 둔다.. 

• 설치 
  • npm install react-hook-form
• 사용

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

function ToDoList() {
    const {register, handleSubmit, formState: { errors }, setError,} = useForm();
    const onValid = (data) => {
        if (data.password !== data.password1) {
            setError(
                "password1",
                { message: "Password are not the same" },
                { shouldFocus: true }
            );
        }
    };

return(
    <div>
        <form>
            <input
                {...register("firstName", {
                    required: "write here",
                    validate: {
                        noSeoul: (value) =>
                            value.includes("seoul") ? "no seoul allowed" : true,
                        noCity: (value) =>
                            value.includes("city") ? "no city allowed" : true,
                    },
                })}
                placeholder="First Name"
            />
            <span>{errors?.firstName?.message}</span>
            <button>Add</button>
        </form>
    </div>
    );
}

export default ToDoList;

일단 소스만 보고 대충 파악을 해 놓고.. 

 

좀 더 본 다음에 자세한 설명을 달아놔야겠다... 

 

이것저것.. 할게 많아서.. 짬짬히.....