react-hook-form 총정리 & 효율적인 Form관리

react-hook-form

 

기존 문제점

간단한 폼 하나 만들 때 들어가는 수많은 useState들!

input 하나에, value값 이벤트 상태 등 관리 포인트들이 너무나 많다.

 

사용 시 개선점

react-hook-form은 value를 관리하기 위한 별도의 상태값이 필요없고! 쉽고 직관적인 API를 제공하여 복잡한 폼 로직을

단순화 합니다. react-hook-form에서 제공되는 hook함수들을 사용하여 관리할 수 있어 꽤나

편리하고 효율적인 코드를 만들 수 있다. 

 

그럼 어떻게 사용해야 하는지 알아보자.

 

---

 

Get Started

npm install react-hook-form

혹은 공홈 참조

https://react-hook-form.com/get-started

Get Started

 

useFrom

가장 기본적으로 사용되는 useFrom을 통해 다양한 객체와 함수를 받아 사용할 수 있습니다.

아래 코드에서 받아오는 것들 하나씩 알아보겠습니다.

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


interface IForm {
	id: number;
    name: string;
    email: string;
}

const { 
    register, 
    formState, 
    watch, 
    handleSubmit, 
    reset, 
    setError, 
    setFocus, 
    getValues  } = useForm<IForm>()

 

register

register함수를 통해 input 태그를 다룰 수 있기 때문에 가장 먼저 알아보겠습니다.

함수의 첫 매개변수는 name입니다. 이 필드를 다루기 위한 key값으로 필수요소입니다.

<input {...register("name")} />

인자 값에 아무것도 넣지 않을 경우 undefined값이 셋팅되며 값이 있을 경우 해당 값(name)으로 나옵니다.

 

두번째 매개변수는 유효성 검사를 위한 다양한 프로퍼티들이 들어갈 수 있습니다.

요게 활용도가 매우 높은데요. 값의 pattern, min, max, 필수여부 등의 셋팅이 쉽게 가능하기 때문입니다.

설정방법도 매우 간단합니다. 아래 코드를 확인해볼게요.

<input {...register("name", {
	required: "필수값일때 사용합니다.",
    minLength: {
    	value: 3,
        message: "3글자 이상이 아닐 경우 출력됩니다."
    },
    maxLength: {
    	value: 10,
        message: "10글자가 넘어갈 경우 출력됩니다."
    },
    valueAsNumber: true,
    min: {
    	value: 10,
        message: "min, max는 숫자일 때 사용됩니다."
    },
    max: {
    	value: 20,
        message: "min, max는 숫자일 때 사용됩니다."
    },
    pattern: {
    	value: /^[a-zA-Z]*$/,
        message: "영어만 입력 가능합니다."
    },
    validate: {
    	fn: email => email.split("@")[1] === "naver.com" || ""
    }
})} />

---

handleSubmit

폼에 여러 데이터를 입력 후 등록 버튼 클릭 시 submit이벤트가 발생하게 되는데, 이때 해당 데이터를 서버에 넘기기 전

검증처리를 해야하는데요. 이때 form 엘리먼트에 handleSubmit함수를 넘겨주고 인자로 우리가 정의한 함수(onSubmit)

을 넘겨줍니다. 이때 data(입력된 최종 데이터)를 받아 검증처리를 진행할 수 있습니다. 

 

* e.preventDefault()가 기본 내장되어 있습니다. 첫 번째 인자는 성공 시 실행시킬 함수, 두번째는 에러 시 실행시킬 함수입니다.

const onSubmit = async (data) => {
	try {
    	// await fetch()
    } catch (e) {
    	// hendle error
    }
}

<form
	onSubmit={handleSubmit(onSubmit)}
>
	...
</form>

---

watch

watch 함수를 통해 입력 값을 구독하고 실시간으로 체크할 수 있습니다.

보통 핸드폰에 - 처리 같은, 조건에 따라 필드에 다른 UI를 랜더링해야할 경우 유용하게 사용하고 있습니다.

매개변수를 주지 않으면 전체값을, 필요한name을 할당하면 해당 값만 관찰할 수 있습니다.

const { register, handleSubmit, watch } = useForm<IForm>()

const watchAll = watch()
const watchName = watch("name")

<form onSubmit={handleSubmit(onSubmit)}>
	<input {...register("name")} />
    <input {...register("phone")} />
</form>

---

getValues

값을 추적하는 방법 중 하나는 위에서 설명한 'watch'함수가 있고 두 번째는 'getValues'를 활용하는 것입니다.

두 가지 방법이 있다는건 무언가 다른 활용점이 있다는 거겠죠?

watch의 경우 입력 값에 따라 리렌더를 발생시키지만, getValues는 값을 반환만하고 리렌더 없이 입력 변경 사항을 구독하지

않습니다. 해서 양식 값을 읽는데만 활용됩니다.

 

*watch와 마찬가지로 매개변수가 없을 경우 전체값을, 매개변수 입력 시 해당 값만 읽어옵니다.

---

reset

양식의 전체 상태, 구독 등을 재설정합니다. 

edit를 위해 양식값을 비우거나 잘못입력된 값을 비울 때 사용하고 있습니다.

<input 
	type="button"
    onClick={() => {
    	reset({
        	name: "",
            age: ""
        })
    }}
/>

useEffect(() => {
	reset({...})
}, [isSubmitSuccess])

---

setError

이 기능으로 오류 설정을 해줄 수 있습니다. 데이터 검증 중 에러가 확인되면 setError함수를 활용해서 

오류 메세지를 출력해줄 수 있습니다. 

setError("name", { type: "max", message: "10글자 이상 입력할 수 없습니다." })

---

setFocus

양식 진입 시 첫 입력란에 포커스를 주거나, 양식 제출 후 에러가 발생한 입력란에 포커스를 줄 때 사용됩니다.

useEffect(() => {
	setFocus("name")
}, [setFocus])

---

마무리

react-hook-form을 쓰며 코드량도 확줄고, validation등의 관리를 효율적으로 할 수 있어서

매우 유용하게 사용하고 있습니다. 

해당 글엔 간단한 기능들만 소개하고 있지만 다음 포스팅엔 다른 훅들과 여러 기능들을

다뤄보도록 하겠습니다. 

 

요기까지 읽어주셔서 감사합니다. 🙇‍♀️

 

출처: react-hook-form 공홈