[react] react-hook-form 사용법(fetch 쉽게쉽게하자)

 

1. 설치

npm i react-hook-form

 

2. 사용

 

const {register, watch, formState, handlesubmit} = useForm()



이렇게 사용 
register은 데이터 값을 만들어 준다<register은 function 이다>
사용법은 사용할 컴포넌트에 넣는다 example)



<input {...register("사용할name값")} />




스프레드 연산자로 register() 로 return되는 객체 안에 있는 내용을 컴포넌트
안에 담아 준다.

watch는 console을 찍어보면 내가 담은 데이터 들을 볼 수 있다.

formstate에 errors를 보면 에러가 뭐가 일어 났는지 알 수 있다.

handleSubmit은 그냥 form 태그에 onSubmit에 넣어주면 preventDefault를 해주는기능이다.

여기서 handleSubmit 안에 성공했을 때의 실행시킬 함수를 적어주어야한다!



<form onSubmit={handleSubmit(onValid)}>




이런식으로!

 

3. register로 html 태그 넣어주기

 

<input {...register("사용할name값", {required: true, minLength: 5})} />
이렇게 하였을 때 register 안에 html 속성을 넣어준다.
이런 식으로

<input {...register("사용할name값", {required: "please write", minLength:{
	value: 5,
	message: "please write 5len over"
}})} />

이런 식으로 message를 사용할 수도 있다.

 

4. useForm에 type 지정해주기

 

register("사용할 name값") 여기서 사용할 name 값의 type을 지정해줘야되는데
만일 name에 string인 name, age, email이 있다고 치면 아래와 같이 작성
interface Iform {
	name:string
	age:string
	email:string
}

이 interface를
const {register, watch, formState, handlesubmit} = useForm<Iform>()

이렇게 넣어주면 된다.
그리고 기본 값을 설정해줄 수 있는데

const {register, watch, formState, handlesubmit} = useForm<Iform>({defautlValue:{
	email: "@naver.com"
})

이런식으로 defaultValue 속성으로 기본값을 설정할 수 있다.

 

5. setError 사용법

 

보통 setError를 사용하는 것은 error에 대한 message나 focus를 관리하기 위해서인데

우리가 submit 했을때 handleSubmit 함수에 성공되었을 떄 만일 onVaild 라는 함수를 인자로 넣었다고

가정 해보자.

일단 코드는 다음과 같다.
const onVaild = (data: Itodo) => {
    if (data.password !== data.password1) {
      setError(
        "password1",
        { message: "password are not the same" },
        { shouldFocus: true }
      );
    }
  };
여기서 setError()안에 일단 error 발생 대상의 name을 스트링으로 적어주고
그 다음 인자로 객체 {} 괄호를 사용해서 message나 shoulFocus를 사용해 
포커싱을 줄 수 있다.

 

6. validate 사용법

 

validate는 register의 인자로 줄 수 있는데 다음 코드를 보자

<input
          {...register("firstName", {
            validate: {
              noNico: (value) => (!value.includes("nico") ? true : "dont nico"),
              noShin: (value) => (value.includes("shin") ? "no Shin" : true),
            },
          })}
          placeholder="firstName"
/>
input에 register로 firstName을 주었고

그다음 인자로 객체안에

validate를 주었다

validate는 

validate: (value) => 

파라미터에 아무거나 적었을때(여기서는 value)
현재 input에 적혀진 data 값을 얻을 수 있고

여기서 함수의 마지막에는 true를 return 하면 오류가 없는 것이고

false를 return 하면 오류가 발생한 것이다.

validate: (value) => true 이렇게 하면 항상 통과
validate: (value) => false 이렇게 하면 항상 오류

여기서 이제 조건을 걸어주는 것이다.
예를 들어 value 값에 내이름 신규철을 적으면 오류가 생기도록 해보자.

validate: (value) => value.includes("신규철") ? "No write 신규철" : true

이렇게 value에 신규철이 포함되면 No write 신규철이라는 error message를 보내주고

안적었을 시 true를 반환해 정상적 실행을 하게 해준다

이때 여러개의 단어를 적지 못하도록 하기 위해서 validate의 value 값을 객체로 묶어주면 된다.

validate: {
	noShin : (value) => value.includes("신규철")? "No shin" : true,
	noKim : (value) => value.includes("김")? "No kim" : true
}

이런 식으로 적어주면 된다.

 

7. setValue 사용

 

setValue는 value 값을 변경할 때 사용 예를 들어
const onVaild = (data: Itodo) => {
    if (data.password !== data.password1) {
      setError(
        "password1",
        { message: "password are not the same" },
        { shouldFocus: true }
      );
    }
  };

이렇게 onValid 함수가 있을 때
마지막에 setValue("toDo", "")
이렇게 해주면 toDo라는 name을 가진 input에 value를 다시 비워준다

당연히 submit을 하면 비워줘야 하기에 이거는 필수적인 요소!