React에서 react-hook-form 사용하기

react-hook-form은 매우 간편하게 form을 생성 및 관리할 수 있는 모듈이다.

해당 사용법에 대해 배워보기 전에, 기존의 방법대로 간단한 form 생성을 구현해보고, 기존 코드를 

react-hook-form 모듈을 사용해 대체하면 얼마나 간단해지는지 비교해보자.

 

---

 

아래와 같이 글자가 10자 이상인 todolist를 입력받아 submit하는 간단한 form을 만들어 보자.

 

 

[ToDoList.tsx]

위와 같은 동작을 하는 form을 생성하기 위해서 todo value의 실시간 입력값을 저장하는 state와 setter함수, 

글자수가 부족할 때의 에러메시지 출력값을 저장할 state와 setter 함수,

onChange 함수, onSubmit 함수 등등 간단한 기능의 todo리스트 한줄을 생성하는데도 해야할 여러 작업들이 있다.

만약 toDoList form이 하나가 아니라 여러개라면, email 받는 form, phone_number 받는 form, name 받는 form 등등 각 input과 form에 대한 onChange함수와 onSubmit 함수를 일일히 정의해줘야 한다는 번거로움이 있다.

import React, {useState} from 'react';
import {useForm} from 'react-hook-form';
function ToDoList(){
    const [todo, setTodo]=useState("");
    const [toDoError, setToDoError]=useState("");
    const onChange = (event:React.FormEvent<HTMLInputElement>) =>{
        const {currentTarget : {value},
    }=event;
    setToDoError("");
    setTodo(value);
    };
    const onSubmit =(event:React.FormEvent<HTMLFormElement>)=>{
        event.preventDefault();
        console.log(todo);
        if(todo.length < 10){
            setToDoError("todo should be longer.");
        }
        console.log("submit");
    };
    return (
        <div>
            <form onSubmit={onSubmit}>
                <input onChange={onChange} value={todo} placeholder ="Write a to do" />
                <button>add</button>
                {toDoError!==""?toDoError:null}
            </form>
        </div>
    );
}
export default ToDoList;

 

 

그에 대한 대안으로, react-hook-form 모듈을 사용하면 훨씬 편리하고 효과적으로 폼을 관리할 수 있다!

react-hook-form 사용법에 대해 차차 알아보도록 하자.

 

---

 

Home

react-hook-form 공식 페이지에 들어가 Demo를 클릭해 들어가면 react-hook-form에 입력값이 받아지는 과정과 입려값에 따라 발생하는 에러메시지들을 확인해 볼 수 있고, Edit 버튼을 눌러보면 react-hook-form을 사용해 어떻게 코드가 구성되었는지도 확인해 볼 수 있다.

 

 

이제, react-hook-form을 사용해 기존 form을 대체해보자.

react-hook-form을 사용하기 위해서 모듈을 import 해주는 것을 잊지 말자.

import {useForm} from 'react-hook-form'

 

input에 입력받는 내용물을 관리할 state와 setter 함수, 그리고 onChange 함수를 대체하기 위해선 오직 register, watch만을 사용해 가능하다.

 

onChange 함수의 역할은 watch 함수가 담당하고, state 관리에 대한 함수는 register가 담당한다.

function ToDoList(){
    const {register, watch} = useForm();
    console.log(watch());
    console.log(register("toDo"));
    return <div>
        <form>
           { /* register 함수가 반환하는 객체를 가져다가 input에 props로 할당 */
             /* 각각의 input마다 따로 state들을 만들어 줄 필요가 없음.*/
           }
            <input {...register("toDo")} placeholder="write what you have to do!"/>
            <button>Add</button>

        </form>
    </div>
}
export default ToDoList;

 

                                                          👉console.log(watch())에 의해 나타난 빈 객체

                👉{...register('toDo')}에 의해 생성된 input state 객체와, watch() 함수로 인해 관리되는 user의 input 값.