React useFormState 유효성 검사 파이프라인: 다단계 폼 유효성 검사 마스터하기

강력한 유효성 검사를 사용하는 복잡한 폼을 구축하는 것은 최신 웹 개발에서 흔한 문제입니다. React의 useFormState 훅은 정교한 다단계 유효성 검사 파이프라인 생성을 가능하게 하여 폼 상태 및 유효성 검사를 관리하는 강력하고 유연한 방법을 제공합니다. 이 포괄적인 가이드는 기본 사항을 이해하는 것부터 고급 비동기 유효성 검사 전략을 구현하는 것까지 프로세스를 안내합니다.

다단계 폼 유효성 검사가 필요한 이유?

기존의 단일 단계 폼 유효성 검사는 특히 많은 필드나 복잡한 종속성이 포함된 폼을 처리할 때 번거롭고 비효율적일 수 있습니다. 다단계 유효성 검사를 통해 다음을 수행할 수 있습니다.

• 사용자 경험 개선: 특정 폼 섹션에 대한 즉각적인 피드백을 제공하여 사용자가 완료 프로세스를 보다 효과적으로 안내합니다.
• 성능 향상: 전체 폼에 대한 불필요한 유효성 검사 확인을 방지하여 특히 대규모 폼의 성능을 최적화합니다.
• 코드 유지 관리성 향상: 유효성 검사 논리를 더 작고 관리하기 쉬운 단위로 분할하여 코드를 더 쉽게 이해하고 테스트하고 유지 관리할 수 있습니다.

useFormState 이해

useFormState 훅(일반적으로 react-use와 같은 라이브러리 또는 사용자 정의 구현에서 사용 가능)은 폼 상태, 유효성 검사 오류 및 제출 처리를 관리하는 방법을 제공합니다. 핵심 기능은 다음과 같습니다.

• 상태 관리: 폼 필드의 현재 값을 저장합니다.
• 유효성 검사: 폼 값에 대한 유효성 검사 규칙을 실행합니다.
• 오류 추적: 각 필드와 관련된 유효성 검사 오류를 추적합니다.
• 제출 처리: 폼을 제출하고 제출 결과를 처리하는 메커니즘을 제공합니다.

기본 유효성 검사 파이프라인 구축

개인 정보(이름, 이메일) 및 주소 정보(거리, 도시, 국가)의 두 단계 폼의 간단한 예제로 시작하겠습니다.

1단계: 폼 상태 정의

먼저 모든 필드를 포함하여 폼의 초기 상태를 정의합니다.

const initialFormState = {
  firstName: '',
  lastName: '',
  email: '',
  street: '',
  city: '',
  country: '',
};

2단계: 유효성 검사 규칙 만들기

다음으로 유효성 검사 규칙을 정의합니다. 이 예에서는 모든 필드가 비어 있지 않아야 하고 이메일이 유효한 형식이어야 합니다.

const validateField = (fieldName, value) => {
  if (!value) {
    return '필수 입력 항목입니다.';
  }

  if (fieldName === 'email' && !/^\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(value)) {
    return '유효하지 않은 이메일 형식입니다.';
  }

  return null; // 오류 없음
};

3단계: useFormState 훅 구현

이제 (가상의) useFormState 훅을 사용하여 유효성 검사 규칙을 React 컴포넌트에 통합해 보겠습니다.

import React, { useState } from 'react';

// 사용자 정의 구현 또는 react-use와 같은 라이브러리 가정
const useFormState = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });

    // 더 나은 UX를 위해 변경 시 유효성 검사(선택 사항)
    setErrors({ ...errors, [name]: validateField(name, value) });
  };

  const validateFormStage = (fields) => {
    const newErrors = {};
    let isValid = true;
    fields.forEach(field => {
      const error = validateField(field, values[field]);
      if (error) {
        newErrors[field] = error;
        isValid = false;
      }
    });
    setErrors({...errors, ...newErrors}); //기존 오류와 병합
    return isValid;
  };

  const clearErrors = (fields) => {
    const newErrors = {...errors};
    fields.forEach(field => delete newErrors[field]);
    setErrors(newErrors);
  };

  return {
    values,
    errors,
    handleChange,
    validateFormStage,
    clearErrors,
  };
};


const MyForm = () => {
  const { values, errors, handleChange, validateFormStage, clearErrors } = useFormState(initialFormState);
  const [currentStage, setCurrentStage] = useState(1);

  const handleNextStage = () => {
    let isValid;
    if (currentStage === 1) {
        isValid = validateFormStage(['firstName', 'lastName', 'email']);
    } else {
        isValid = validateFormStage(['street', 'city', 'country']);
    }

    if (isValid) {
      setCurrentStage(currentStage + 1);
    }
  };

  const handlePreviousStage = () => {
    if(currentStage > 1){
      if(currentStage === 2){
        clearErrors(['firstName', 'lastName', 'email']);
      } else {
        clearErrors(['street', 'city', 'country']);
      }
      setCurrentStage(currentStage - 1);
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const isValid = validateFormStage(['firstName', 'lastName', 'email', 'street', 'city', 'country']);
    if (isValid) {
      // 폼 제출
      console.log('폼 제출됨:', values);
      alert('폼이 제출되었습니다!'); //실제 제출 논리로 대체
    } else {
      console.log('폼에 오류가 있습니다. 수정하십시오.');
    }
  };

  return (
    

      {currentStage === 1 && (
        

          
개인 정보
          
            이름:
            
            {errors.firstName && {errors.firstName}}
          
          

          
            성:
            
            {errors.lastName && {errors.lastName}}
          
          

          
            이메일:
            
            {errors.email && {errors.email}}
          
          

        
      )}

      {currentStage === 2 && (
        

          
주소 정보
          
            거리:
            
            {errors.street && {errors.street}}
          
          

          
            도시:
            
            {errors.city && {errors.city}}
          
          

          
            국가:
            
            {errors.country && {errors.country}}
          
          

        
      )}

      

        {currentStage > 1 && 이전}
        {currentStage < 2 && 다음}
        {currentStage === 2 && 제출}
      
    
  );
};

export default MyForm;

4단계: 단계 탐색 구현

상태 변수를 사용하여 폼의 현재 단계를 관리하고 현재 단계를 기반으로 적절한 폼 섹션을 렌더링합니다.

고급 유효성 검사 기술

비동기 유효성 검사

경우에 따라 유효성 검사에는 사용자 이름이 사용 가능한지 확인하는 것과 같이 서버와의 상호 작용이 필요합니다. 이를 위해서는 비동기 유효성 검사가 필요합니다. 통합 방법은 다음과 같습니다.

const validateUsername = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.available) {
      return null; // 사용자 이름을 사용할 수 있습니다.
    } else {
      return '사용자 이름이 이미 사용 중입니다.';
    }
  } catch (error) {
    console.error('사용자 이름 확인 오류:', error);
    return '사용자 이름 확인 오류입니다. 다시 시도하십시오.'; // 네트워크 오류를 정상적으로 처리합니다.
  }
};

const useFormStateAsync = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  const validateFieldAsync = async (fieldName, value) => {
    if (fieldName === 'username') {
      return await validateUsername(value);
    }
    return validateField(fieldName, value);
  };


  const handleSubmit = async (event) => {
      event.preventDefault();
      setIsSubmitting(true);
      let newErrors = {};
      let isValid = true;

      for(const key in values){
        const error = await validateFieldAsync(key, values[key]);
        if(error){
          newErrors[key] = error;
          isValid = false;
        }
      }

      setErrors(newErrors);
      setIsSubmitting(false);

      if (isValid) {
        // 폼 제출
        console.log('폼 제출됨:', values);
        alert('폼이 제출되었습니다!'); //실제 제출 논리로 대체
      } else {
        console.log('폼에 오류가 있습니다. 수정하십시오.');
      }
  };



  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    isSubmitting //선택 사항: 유효성 검사 중에 로딩 메시지 표시
  };
};

이 예제에는 사용자 이름 가용성을 확인하기 위해 API 호출을 수행하는 validateUsername 함수가 통합되어 있습니다. 잠재적인 네트워크 오류를 처리하고 사용자에게 적절한 피드백을 제공하십시오.

조건부 유효성 검사

일부 필드는 다른 필드의 값에 따라 유효성 검사가 필요할 수 있습니다. 예를 들어 사용자가 고용 상태임을 나타내는 경우 "회사 웹사이트" 필드만 필수일 수 있습니다. 유효성 검사 함수 내에서 조건부 유효성 검사를 구현합니다.

const validateFieldConditional = (fieldName, value, formValues) => {
  if (fieldName === 'companyWebsite' && formValues.employmentStatus === 'employed' && !value) {
    return '고용 상태인 경우 회사 웹사이트는 필수입니다.';
  }
  return validateField(fieldName, value); // 기본 유효성 검사에 위임
};

동적 유효성 검사 규칙

경우에 따라 유효성 검사 규칙 자체가 외부 요인이나 데이터를 기반으로 동적이어야 합니다. 유효성 검사 규칙을 유효성 검사 함수에 인수로 전달하여 이를 달성할 수 있습니다.

const validateFieldWithDynamicRules = (fieldName, value, rules) => {
  if (rules && rules[fieldName] && rules[fieldName].maxLength && value.length > rules[fieldName].maxLength) {
    return `이 필드는 ${rules[fieldName].maxLength}자 미만이어야 합니다.`
  }
  return validateField(fieldName, value); // 기본 유효성 검사에 위임
};

오류 처리 및 사용자 경험

긍정적인 사용자 경험을 위해서는 효과적인 오류 처리가 중요합니다. 다음 사항을 고려하십시오.

• 오류를 명확하게 표시: 해당 입력 필드 근처에 오류 메시지를 배치합니다. 명확하고 간결한 언어를 사용합니다.
• 실시간 유효성 검사: 사용자가 입력할 때 필드의 유효성을 검사하여 즉각적인 피드백을 제공합니다. 성능에 미치는 영향에 유의하십시오. 필요한 경우 유효성 검사 호출을 디바운스하거나 스로틀링합니다.
• 오류에 집중: 제출 후 오류가 있는 첫 번째 필드에 사용자의 주의를 집중합니다.
• 접근성: ARIA 속성 및 의미 체계 HTML을 사용하여 오류 메시지가 장애가 있는 사용자에게 접근 가능한지 확인합니다.
• 국제화(i18n): 적절한 국제화를 구현하여 사용자가 선호하는 언어로 오류 메시지를 표시합니다. i18next 또는 네이티브 JavaScript Intl API와 같은 서비스를 사용할 수 있습니다.

다단계 폼 유효성 검사를 위한 모범 사례

• 유효성 검사 규칙을 간결하게 유지: 복잡한 유효성 검사 논리를 더 작고 재사용 가능한 함수로 나눕니다.
• 철저히 테스트: 유효성 검사 규칙의 정확성과 신뢰성을 보장하기 위해 단위 테스트를 작성합니다.
• 유효성 검사 라이브러리 사용: 프로세스를 단순화하고 코드 품질을 개선하기 위해 전용 유효성 검사 라이브러리(예: Yup, Zod)를 사용하는 것이 좋습니다. 이러한 라이브러리는 종종 스키마 기반 유효성 검사를 제공하여 복잡한 유효성 검사 규칙을 더 쉽게 정의하고 관리할 수 있습니다.
• 성능 최적화: 특히 실시간 유효성 검사 중에 불필요한 유효성 검사 확인을 피합니다. 메모이제이션 기술을 사용하여 유효성 검사 결과를 캐싱합니다.
• 명확한 지침 제공: 명확한 지침과 유용한 힌트를 통해 사용자가 폼 완료 프로세스를 안내합니다.
• 점진적 공개 고려: 각 단계에 대한 관련 필드만 표시하여 폼을 단순화하고 인지 부하를 줄입니다.

대체 라이브러리 및 접근 방식

이 가이드에서는 사용자 정의 useFormState 훅에 중점을 두고 있지만 유사한 기능을 제공하는 여러 가지 훌륭한 폼 라이브러리가 있으며 종종 추가 기능과 성능 최적화가 함께 제공됩니다. 몇 가지 인기 있는 대안은 다음과 같습니다.

• Formik: React에서 폼 상태 및 유효성 검사를 관리하는 데 널리 사용되는 라이브러리입니다. 폼 처리에 대한 선언적 접근 방식을 제공하고 다양한 유효성 검사 전략을 지원합니다.
• React Hook Form: 제어되지 않는 컴포넌트와 React의 ref API를 활용하여 다시 렌더링을 최소화하는 성능 중심 라이브러리입니다. 크고 복잡한 폼에 탁월한 성능을 제공합니다.
• Final Form: 다양한 UI 프레임워크 및 유효성 검사 라이브러리를 지원하는 다용도 라이브러리입니다. 폼 동작을 사용자 정의하기 위한 유연하고 확장 가능한 API를 제공합니다.

올바른 라이브러리 선택은 특정 요구 사항과 선호도에 따라 다릅니다. 결정을 내릴 때 성능, 사용 편의성 및 기능 세트와 같은 요소를 고려하십시오.

국제적 고려 사항

글로벌 사용자를 위한 폼을 구축할 때는 국제화 및 현지화를 고려하는 것이 필수적입니다. 몇 가지 주요 측면은 다음과 같습니다.

• 날짜 및 시간 형식: 일관성을 보장하고 혼동을 피하기 위해 로캘별 날짜 및 시간 형식을 사용합니다.
• 숫자 형식: 통화 기호 및 소수점 구분 기호를 포함하여 로캘별 숫자 형식을 사용합니다.
• 주소 형식: 주소 필드를 다양한 국가 형식에 맞게 조정합니다. 일부 국가에서는 도시 앞에 우편 번호가 필요할 수 있고, 다른 국가에서는 우편 번호가 전혀 없을 수 있습니다.
• 전화 번호 유효성 검사: 국제 전화 번호 형식을 지원하는 전화 번호 유효성 검사 라이브러리를 사용합니다.
• 문자 인코딩: 폼이 유니코드 및 기타 비라틴 문자를 포함하여 다양한 문자 집합을 올바르게 처리하는지 확인합니다.
• 오른쪽에서 왼쪽(RTL) 레이아웃: 그에 따라 폼 레이아웃을 조정하여 아랍어 및 히브리어와 같은 RTL 언어를 지원합니다.

이러한 국제적 측면을 고려함으로써 글로벌 사용자가 접근하고 사용하기 쉬운 폼을 만들 수 있습니다.

결론

React의 useFormState 훅(또는 대체 라이브러리)을 사용하여 다단계 폼 유효성 검사 파이프라인을 구현하면 사용자 경험을 크게 개선하고 성능을 향상시키며 코드 유지 관리성을 높일 수 있습니다. 핵심 개념을 이해하고 이 가이드에 설명된 모범 사례를 적용하면 최신 웹 애플리케이션의 요구 사항을 충족하는 강력하고 확장 가능한 폼을 구축할 수 있습니다.

사용자 경험을 우선시하고 철저히 테스트하고 프로젝트의 특정 요구 사항에 맞게 유효성 검사 전략을 조정하는 것을 잊지 마십시오. 신중한 계획과 실행을 통해 기능적이고 사용하기 즐거운 폼을 만들 수 있습니다.

추가 학습

• React 공식 문서
• Formik 문서
• React Hook Form 문서