ReactHookForm 입력폼 자동생성

지난 시간에는 DB 테이블 컬럼정보를 이용한 Typescript Class 작성에 대해 말씀드렸습니다.

오늘은 ReactHookForm 을 이용하여 입력폼 템플릿 코드를 생성하는 기능을 소개해드립니다.

코드 한땀 서비스는 기본적으로 DB 테이블 Snake case 컬럼 기준으로, Camel case 변수를 생성하게 되는데요.

초기값 입력에 관해서는 이전 게시물 확인을 부탁드립니다.

ReactHookForm 조각코드 자동생성으로 아래와 같은 입력폼 탬플릿을 생성하실 수 있습니다

DB 테이블 컬럼들을 입력 항목으로 나열하여 탬플릿 코드를 생성해줍니다.

그럼 제공하는 옵션에 대해 간단히 말씀드립니다.

ReactHookForm 입력폼 생성 옵션

• typescript : Typescript 기반의 입력폼 코드를 생성합니다.
• component : 입력 콤로넌트 유형을 선택합니다.
  • Basic : html 기본 input 태그를 이용해 입력폼을 구성합니다.
  • useController : 콤포넌트화 한 html 기본 input 태그를 이용해 입력폼을 구성합니다.
  • MUI : MUI 에서 제공하는 TextField 콤포넌트를 이용해 입력폼을 구성합니다.
• useFieldArray : 다중 폼 필드 배열을 통해 입력폼을 구성합니다.
• semicolon : 각 구문의 맨 뒷쪽에 세미콜론을 넣어줍니다.

ReactHookForm 입력폼 생성 예시

import React, { useEffect } from 'react';
import { useForm } from 'react-hook-form';
ㅤ
// import "./styles.css";
ㅤ
const initOlosiaCom = {
	userId: '',
	userEmail: ''
};
ㅤ
export default function OlosiaComForm({ userId }) {
ㅤ
	const {
		register,
		handleSubmit,
		reset,
		formState: { isSubmitting, errors }
	} = useForm({ defaultValues: initOlosiaCom });
ㅤ
	useEffect(() => {
		if (!!userId) {
			new Promise((resolve) => {
				setTimeout(() => {
					resolve(
						JSON.parse(`{
							"userId": FETCHED_USER_ID,
							"userEmail": FETCHED_USER_EMAIL
						}`)
					);
				}, 1000);
			}).then((data) => reset(data));
		}
	}, [userId, reset]);
ㅤ
	const fnSubmit = async (data) => {
		await new Promise((r) => setTimeout(r, 500));
		alert(JSON.stringify(data));
	};
ㅤ
	return (
		<form noValidate onSubmit={handleSubmit(fnSubmit)}>
			<label htmlFor='userId'>User identification</label>
			<input type='text' id='userId' placeholder='User identification'
				{...register('userId', { required: 'This field is REQUIRED' })}
			/>
			{errors.userId && <small>{errors.userId.message}</small>}
ㅤ
			<label htmlFor='userEmail'>User E-mail</label>
			<input type='text' id='userEmail' placeholder='User E-mail'
				{...register('userEmail', { required: 'This field is REQUIRED' })}
			/>
			{errors.userEmail && <small>{errors.userEmail.message}</small>}
ㅤ
			<input type='submit' disabled={isSubmitting} />
		</form>
	);
}

위 예시는 html 기본 input 태그를 이용해 입력폼을 구성하는 Basic 옵션으로 생성된 템플릿 코드 입니다.

코드 한땀 서비스를 방문하셔서 useController / MUI 옵션을 선택해 구현되는 차이첨을 비교해보시고, typescript 옵션을 통해 Typescript 로 생성된 코드도 확인해보세요.

만들어 놓고 보니까 react-hook-form 를 사용하시고자 할 때, useForm, register, handleSubmit, reset, errors, useController 등의 사용방법을 학습하는데도 참고하실 수 있을것 같습니다.

그리고 useFieldArray 옵션을 적용하면, 아래와 같은 다중 입력 폼도 생성해보실 수 있습니다.

오늘은 코드 한땀에서 제공하는 ReactHookForm 입력폼 생성기능에 대해 간단히 말씀드렸습니다.

혹시 이용하시면서 필요한 기능 있으시면 댓글 부탁드립니다.

감사합니다.

올로시아 코드 한땀 서비스 바로가기