[React] React Hook Form 라이브러리 사용하기

React Hook Form이란?

React에서 폼을 관리하기 위한 라이브러리

 

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

React Hook Form - performant, flexible and extensible form library

공식문서 말을 빌리자면,

사용자 경험을 중요시 하는 라이브러리로 폼에 일관된 유효성 검사 전략을 구현. 라이브러리가 가벼워 패키지 크기를 최소화하며

성능면에서도 렌더링 횟수를 최소화하는 라이브러리 

 

React Hook Form 왜 사용할까?

이 라이브러리를 사용하기 전에 왜 사용하면 좋은지 라이브러리를 사용하지 않고 회원가입을 하는 폼을 만들어보려고 한다.

interface FormData {
    name: string;
    email: string;
    phone: string;
    password: string;
}

function App() {
    const [formData, setFormData] = useState<FormData>({
        name: '',
        email: '',
        phone: '',
        password: ''
    })
    const [error, setError] = useState<{ [key: string]: string }>({});

    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
        const {name, value} = e.target;
        setFormData((values) => ({
            ...values,
            [name]: value
        }))
    }

    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        if (formData.password.length < 8) {
            setError({password: '비밀번호는 8자리 이상이어야 합니다.'})
            return;
        }
    }

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" name='name' value={formData.name} onChange={handleInputChange} placeholder='이름'
                   required={true}/>
            <input type="text" name='phone' value={formData.phone} onChange={handleInputChange} placeholder='전화번호'/>
            <input type="email" name='email' value={formData.email} onChange={handleInputChange} placeholder='이메일'
                   required={true}/>
            <input type="password" name='password' value={formData.password} onChange={handleInputChange}
                   placeholder='비밀번호' required={true}/>
            {error.password && <span>{error.password}</span>}
            <button type='submit'>회원가입</button>
        </form>
    )
}

 

보통은 이렇게 useState를 사용해서 폼 데이터, 에러를 관리하고 이벤트 핸들러를 통해 입력값이 바뀔 때마다 상태를 업데이트 한다.

그러나 모든 필드에 유효성 검사를 하고 입력 폼도 늘어나면 코드 길이가 길어진 뿐만 아니라

모든 값이 상태로 관리되기 때문에 값이 바뀔 때마다 컴포넌트가 리렌더링이 되면서 성능 문제를 일으킬 수 있다.

 

React Hook Form과 같은 라이브러리를 사용하면 입력값의 유효성 검사, 상태관리를 자동화하고 불필요한 리렌더링을 최소화해서 성능을 향상시킬 수 있다.

 

React Hook Form 사용하기

npm install react-hook-form
yarn add react-hook-form

 

interface FormData {
    name: string;
    email: string;
    phone: string;
    password: string;
}

function App() {
    const {register, handleSubmit, formState: {errors}} = useForm<FormData>()

    const onSubmit = (data: FormData) => {
        console.log(data)
    }

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input type="text" {...register("name", {required: "이름을 입력하세요."})} placeholder='이름'/>
            {errors.name && <span>{errors.name.message}</span>}
            
            <input type="text" {...register("phone")} placeholder='전화번호'/>
            
            <input type="email" {...register('email', {required: "이메일을 입력하세요."})} placeholder='이메일'/>
            {errors.email && <span>{errors.email.message}</span>}
            
            <input type="password" {...register('password', {
                required: '비밀번호를 입력하세요.',
                minLength: {value: 8, message: "비밀번호는 최소 8자리 이상이어야 합니다."}
            })} placeholder='비밀번호'/>
            {errors.password && <span>{errors.password.message}</span>}
            
            <button type='submit'>회원가입</button>
        </form>
    )
}

에러메시지를 설정하는 부분 빼곤 useState를 사용했을 때 보다 훨씬 간결해진 걸 볼 수 있다.

 

register

<input type="password" {...register('password', {
    required: '비밀번호를 입력하세요.',
    minLength: {value: 8, message: "비밀번호는 최소 8자리 이상이어야 합니다."}
})} placeholder='비밀번호'/>

register 함수는 React Hook Form에 입력 요소를 등록해서 폼 상태를 관리하는 역할을 한다.

이 함수는 첫번째 인자에 입력 필드의 이름, 두번째 인자에 유효성 검사 규칙을 전달할 수 있다.

 

위 코드는 'password' 라는 이름의 입력 필드를 등록해서 폼 데이터 객체에서 'password'키로 식별된다.

 

지원되는 유효성 검사 규칙 목록

• required: 필수
• min: 숫자 입력 최소 허용값
• max: 숫자 입력 최대 허용값
• minLength: 문자 입력 최소 허용 길이
• maxLength: 문자 입력 최대 허용 길이
• pattern: 정규표현식
• validate: 사용자 정의 유효성 검사

 

handleSubmit

const onSubmit = (data: FormData) => {
    console.log(data)
}

 

이 함수는 폼 제출 이벤트를 처리하는데 사용된다.

폼의 제출 이벤트를 감지하고 폼 데이터를 객체 형태로 수집해서 유효성을 검사한 후 사용자가 정의한 제출 핸들러 함수를 호출한다.

또한 기본 제출 동작을 방지하여 페이지 새로고침을 막는다.

 

formState

<input type="password" {...register('password', {
    required: '비밀번호를 입력하세요.',
    minLength: {value: 8, message: "비밀번호는 최소 8자리 이상이어야 합니다."}
})} placeholder='비밀번호'/>

{errors.password && <span>{errors.password.message}</span>}

formState 객체를 폼의 상태를 나타내며, 위 코드는 오류를 포함하여 폼의 유효성에 대한 정보를 제공한다.
formState의 기능은 아래에서 확인할 수 있으며 주요 기능은

https://react-hook-form.com/docs/useform/formstate

• errors: 현재 입력 필드에서 발생한 유효성 검사의 오류. 유효성 검사 규칙을 설정하고 오류 메시지를 정의하면 해당 입력 필드의 이름과 메시지가 이 속성에 저장된다.
• dirty:  사용자가 입력 필드의 값을 변경했는지 여부. 입력 필드값이 변경되면 dirty 상태가 true로 설정됨
• isSubmitting: 폼이 현재 제출 중인지 여부. 제출되면 true로 설정
• isLoading: 비동기 방식으로 데이터를 로드하는 경우 폼이 로딩중인지 여부

 

그 외 추가 기능

• reset: 폼 초기화
• watch: 특정 입력 필드 감시해서 입력값이 변경될 때마다 특정 동작 수행 (ex. 제출버튼 활성화)
• getValues: 모든 입력 필드의 값 가져오기
• setValue: 폼의 입력 필드의 값을 동적으로 설정 (ex. 수정페이지에서 필드에 초기값 설정)