프론트엔드 개발에서 복잡한 폼 탐색하기

소개

끊임없이 발전하는 프론트엔드 개발 환경에서 폼 처리는 피할 수 없으며 종종 복잡한 작업입니다. 간단한 로그인 폼부터 동적 필드와 조건부 로직이 있는 다단계 등록 프로세스까지, 견고한 상태 관리 및 유효성 검사은 원활한 사용자 경험과 데이터 무결성을 위해 매우 중요합니다. 폼 로직을 처음부터 구축하는 것이 가능하지만, 가장 기본적인 시나리오를 넘어서면 빠르게 번거롭고 오류가 발생하기 쉽습니다. 전용 폼 라이브러리가 등장하는 곳이며, 개발을 간소화하기 위한 추상화 및 유틸리티를 제공합니다. 이 글에서는 Formik, React Hook Form, Vuelidate라는 세 가지 주요 솔루션을 탐구합니다. 복잡한 폼 상태 및 유효성 검사를 관리하는 접근 방식을 살펴보고, 실제 적용 사례를 설명하며, 궁극적으로 개발자가 프로젝트에 적합한 도구를 선택하도록 안내합니다.

폼 관리 필수 요소 이해

각 라이브러리의 세부 사항을 살펴보기 전에 폼 관리의 핵심 개념에 대한 공통된 이해를 확립해 보겠습니다.

• 폼 상태: 폼 내의 모든 입력 필드의 현재 값을 나타냅니다. 폼 상태 관리는 사용자가 타이핑할 때 값을 업데이트하고, 재설정하고, 미리 채우고, 제출하는 것을 포함합니다.
• 유효성 검사: 사용자 제출 데이터가 특정 기준을 충족하는지 확인하는 프로세스입니다. 필수 필드, 데이터 유형(예: 이메일 형식, 숫자 범위), 사용자 정의 비즈니스 로직 확인을 포함할 수 있습니다. 유효성 검사는 일반적으로 사용자에게 오류에 대한 피드백을 제공합니다.
• 터치 상태: 사용자가 폼 필드와 상호 작용했는지(예: 포커스 및 포커스 해제) 나타냅니다. 이는 종종 사용자가 필드를 채우려고 시도한 후에만 유효성 검사 오류를 조건부로 표시하는 데 사용됩니다.
• 더티 상태 (Dirty State): 폼 필드의 값이 초기 값에서 변경되었는지 여부를 나타냅니다. 이는 사용자가 다른 페이지로 이동하기 전에 변경 사항을 저장하도록 프롬프트하는 데 유용할 수 있습니다.
• 제출 처리: 검증된 폼 데이터를 백엔드 서버로 보내거나 다른 작업을 수행하는 프로세스입니다. 여기에는 종종 제출 중에 폼을 비활성화하고 잠재적인 API 오류를 처리하는 것이 포함됩니다.

Formik React를 위한 포괄적인 솔루션

Formik은 폼 구축의 모든 측면을 단순화하는 것을 목표로 하는 React를 위한 인기 있고 기능이 풍부한 폼 라이브러리입니다. 폼 값, 오류, 터치 필드, 제출 로직을 가져오는 일련의 도우미를 제공합니다.

원칙: Formik은 React의 Context API를 기반으로 구축되었으며 폼을 래핑하는 <Formik> 컴포넌트를 제공합니다. 폼 관리의 데 필요한 모든 상태와 메서드를 포함하는 formik 객체를 노출합니다(렌더 프롭 또는 훅을 통한 프롭).

구현 예:

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

const SignupForm = () => {
    const formik = useFormik({
        initialValues: {
            firstName: '',
            lastName: '',
            email: '',
        },
        validationSchema: Yup.object({
            firstName: Yup.string()
                .max(15, 'Must be 15 characters or less')
                .required('Required'),
            lastName: Yup.string()
                .max(20, 'Must be 20 characters or less')
                .required('Required'),
            email: Yup.string().email('Invalid email address').required('Required'),
        }),
        onSubmit: (values) => {
            alert(JSON.stringify(values, null, 2));
        },
    });

    return (
        <form onSubmit={formik.handleSubmit}>
            <label htmlFor="firstName">First Name</label>
            <input
                id="firstName"
                name="firstName"
                type="text"
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
                value={formik.values.firstName}
            />
            {formik.touched.firstName && formik.errors.firstName ? (
                <div>{formik.errors.firstName}</div>
            ) : null}

            <label htmlFor="lastName">Last Name</label>
            <input
                id="lastName"
                name="lastName"
                type="text"
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
                value={formik.values.lastName}
            />
            {formik.touched.lastName && formik.errors.lastName ? (
                <div>{formik.errors.lastName}</div>
            ) : null}

            <label htmlFor="email">Email Address</label>
            <input
                id="email"
                name="email"
                type="email"
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
                value={formik.values.email}
            />
            {formik.touched.email && formik.errors.email ? (
                <div>{formik.errors.email}</div>
            ) : null}

            <button type="submit">Submit</button>
        </form>
    );
};

export default SignupForm;

애플리케이션 시나리오: Formik은 상태 통합 및 필드 배열, 위자드 폼, 복잡한 조건부 유효성 검사와 같은 고급 기능이 필요한 폼에 탁월합니다. 의견이 반영된 구조와 포괄적인 기능 세트는 개발자 경험과 복잡한 React 폼의 유지 관리 우선 순위를 지정하는 애플리케이션에 좋은 선택입니다.

React Hook Form 성능 중심 React 폼

React Hook Form(RHF)은 성능과 React의 제어되지 않은 컴포넌트에 중점을 둔 다른 접근 방식을 취합니다. 가능한 경우 네이티브 HTML 폼 유효성 검사를 활용하고 다시 렌더링을 최소화합니다.

원칙: RHF는 register 함수를 사용하여 입력을 등록합니다. React 상태에서 입력 값을 유지하는 것을 대부분 피하고 제출 시 DOM에서 직접 읽으므로 특히 입력이 많은 폼의 경우 상당한 성능 이점을 얻을 수 있습니다.

구현 예:

import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup';

const schema = Yup.object().shape({
    firstName: Yup.string()
        .max(15, 'Must be 15 characters or less')
        .required('Required'),
    lastName: Yup.string()
        .max(20, 'Must be 20 characters or less')
        .required('Required'),
    email: Yup.string().email('Invalid email address').required('Required'),
});

const SignupFormRHF = () => {
    const { register, handleSubmit, formState: { errors } } = useForm({
        resolver: yupResolver(schema)
    });

    const onSubmit = (data) => {
        alert(JSON.stringify(data, null, 2));
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <label htmlFor="firstName">First Name</label>
            <input
                id="firstName"
                name="firstName"
                type="text"
                {...register('firstName')}
            />
            {errors.firstName && <div>{errors.firstName.message}</div>}

            <label htmlFor="lastName">Last Name</label>
            <input
                id="lastName"
                name="lastName"
                type="text"
                {...register('lastName')}
            />
            {errors.lastName && <div>{errors.lastName.message}</div>}

            <label htmlFor="email">Email Address</label>
            <input
                id="email"
                name="email"
                type="email"
                {...register('email')}
            />
            {errors.email && <div>{errors.email.message}</div>}

            <button type="submit">Submit</button>
        </form>
    );
};

export default SignupFormRHF;

애플리케이션 시나리오: React Hook Form은 성능에 민감한 애플리케이션 및 다시 렌더링을 최소화하는 것이 우선 순위인 많은 수의 입력 필드가 있는 폼에 이상적입니다. 또한 제어되지 않은 컴포넌트를 선호하거나 번들 크기가 작은 더 가벼운 솔루션을 원하는 개발자에게 훌륭한 선택입니다.

Vuelidate Vue.js를 위한 유연한 유효성 검사

Vuelidate는 간단하고 가벼우며 프레임워크에 구애받지 않는(주로 Vue.js와 관련되어 있지만) 유효성 검사 라이브러리입니다. 유효성 검사에만 집중하여 개발자가 Vue의 반응 시스템 또는 v-model을 사용하여 폼 상태를 관리할 수 있습니다.

원칙: Vuelidate는 폼 데이터 구조에 해당하는 객체로 유효성 검사 규칙을 정의하여 작동합니다. 그런 다음 컴포넌트의 데이터 모델에 유효성 검사 상태(예: $dirty, $error, $pending 및 특정 규칙 오류)를 주입합니다.

구현 예:

<template>
    <form @submit.prevent="submitForm">
        <label for="firstName">First Name</label>
        <input
            id="firstName"
            v-model="formData.firstName"
            @blur="v$.formData.firstName.$touch"
        >
        <template v-if="v$.formData.firstName.$error">
            <div v-if="v$.formData.firstName.required.$invalid">First name is required.</div>
            <div v-if="v$.formData.firstName.maxLength.$invalid">Must be 15 characters or less.</div>
        </template>

        <label for="lastName">Last Name</label>
        <input
            id="lastName"
            v-model="formData.lastName"
            @blur="v$.formData.lastName.$touch"
        >
        <template v-if="v$.formData.lastName.$error">
            <div v-if="v$.formData.lastName.required.$invalid">Last name is required.</div>
            <div v-if="v$.formData.lastName.maxLength.$invalid">Must be 20 characters or less.</div>
        </template>

        <label for="email">Email Address</label>
        <input
            id="email"
            v-model="formData.email"
            @blur="v$.formData.email.$touch"
        >
        <template v-if="v$.formData.email.$error">
            <div v-if="v$.formData.email.required.$invalid">Email is required.</div>
            <div v-if="v$.formData.email.email.$invalid">Invalid email address.</div>
        </template>

        <button type="submit" :disabled="v$.$invalid">Submit</button>
    </form>
</template>

<script>
import useVuelidate from '@vuelidate/core'
import { required, email, maxLength } from '@vuelidate/validators'

export default {
    setup () {
        const v$ = useVuelidate()
        return { v$ }
    },
    data() {
        return {
            formData: {
                firstName: '',
                lastName: '',
                email: '',
            }
        }
    },
    validations () {
        return {
            formData: {
                firstName: { required, maxLength: maxLength(15) },
                lastName: { required, maxLength: maxLength(20) },
                email: { required, email }
            }
        }
    },
    methods: {
        async submitForm() {
            const isFormValid = await this.v$.$validate();
            if (!isFormValid) return;
            alert(JSON.stringify(this.formData, null, 2));
        }
    }
}
</script>

애플리케이션 시나리오: Vuelidate는 Vue의 반응성 시스템과 원활하게 통합되는 bardziej granular한 제어를 선호하는 Vue.js 프로젝트에 훌륭한 선택입니다. 가볍고 매우 유연하여 단순하고 적당히 복잡한 폼 모두에 적합하며, 특히 폼 상태 관리 유틸리티뿐만 아니라 유효성 검사가 주요 관심사일 때 그렇습니다.

결론

Formik, React Hook Form, Vuelidate는 각각 프론트엔드 개발에서 복잡한 폼 상태 및 유효성 검사를 처리하는 데 있어 고유한 이점을 제공합니다. Formik은 React에 대한 전체적이고 의견이 반영된 솔루션을 제공하여 복잡하고 기능이 풍부한 폼에 이상적입니다. React Hook Form은 제어되지 않은 컴포넌트를 활용하여 React의 성능과 미니멀리즘에서 탁월합니다. Vuelidate는 Vue.js를 위한 유연하고 가벼운 유효성 검사 시스템을 제공하며 Vue의 반응성과 원활하게 통합됩니다. 이 강력한 도구들 간의 선택은 궁극적으로 프로젝트의 특정 요구 사항, 프레임워크 기본 설정, 성능, 기능 및 번들 크기에 대한 우선 순위에 달려 있습니다. 이러한 라이브러리를 숙달하면 개발자는 자신감 있게 강력하고 사용자 친화적인 폼을 구축할 수 있습니다.