Custom Hook을 사용한 폼 유효성 검증 구현

06 Nov 2023

reactjs

폼 유효성 검증은 웹 애플리케이션에서 매우 중요한 부분입니다. 사용자가 입력한 데이터의 유효성을 검증하여 올바르지 않은 데이터가 서버로 전송되는 것을 방지할 수 있습니다. 이번 포스트에서는 React의 Custom Hook을 사용하여 폼 유효성 검증을 간편하게 구현하는 방법을 살펴보겠습니다.

Custom Hook 만들기

먼저, useFormValidation이라는 Custom Hook을 만들어 보겠습니다. 이 Hook은 폼의 입력 값을 관리하고 유효성을 검증하는 기능을 제공할 것입니다.

import { useState } from 'react';

const useFormValidation = (initialState, validationRules) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});

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

  const validateForm = () => {
    const validationErrors = {};

    for (const rule in validationRules) {
      if (Object.hasOwnProperty.call(validationRules, rule)) {
        const value = values[rule];
        const rules = validationRules[rule];

        for (const validationRule of rules) {
          if (!validationRule.validator(value)) {
            validationErrors[rule] = validationRule.message;
            break;
          }
        }
      }
    }

    setErrors(validationErrors);
    return Object.keys(validationErrors).length === 0;
  };

  return { values, errors, handleInputChange, validateForm };
};

export default useFormValidation;

이 Custom Hook은 입력 값과 에러 상태를 관리하는 values와 errors 변수를 제공하며, handleInputChange 함수를 통해 입력 값이 변경될 때 상태를 갱신합니다. 또한 validateForm 함수를 통해 입력 값에 대한 유효성을 검증하고 에러 상태를 갱신합니다.

폼 컴포넌트에 Custom Hook 적용하기

이제 Custom Hook을 사용하여 폼 컴포넌트에 폼 유효성 검증 기능을 적용해보겠습니다.

import React from 'react';
import useFormValidation from './useFormValidation';

const SignupForm = () => {
  const initialState = {
    username: '',
    password: '',
    confirmPassword: '',
  };

  const validationRules = {
    username: [
      {
        validator: (value) => value.length > 0,
        message: 'Username is required',
      },
    ],
    password: [
      {
        validator: (value) => value.length >= 6,
        message: 'Password must be at least 6 characters',
      },
    ],
    confirmPassword: [
      {
        validator: (value) => value === values.password,
        message: 'Password does not match',
      },
    ],
  };

  const { values, errors, handleInputChange, validateForm } = useFormValidation(initialState, validationRules);

  const handleSubmit = (e) => {
    e.preventDefault();

    if (validateForm()) {
      // 폼 데이터를 서버로 전송
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Username</label>
        <input type="text" id="username" name="username" value={values.username} onChange={handleInputChange} />
        {errors.username && <span>{errors.username}</span>}
      </div>

      <div>
        <label htmlFor="password">Password</label>
        <input type="password" id="password" name="password" value={values.password} onChange={handleInputChange} />
        {errors.password && <span>{errors.password}</span>}
      </div>

      <div>
        <label htmlFor="confirmPassword">Confirm Password</label>
        <input type="password" id="confirmPassword" name="confirmPassword" value={values.confirmPassword} onChange={handleInputChange} />
        {errors.confirmPassword && <span>{errors.confirmPassword}</span>}
      </div>

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

export default SignupForm;

위 예시에서는 SignupForm 컴포넌트에서 useFormValidation을 호출하여 Custom Hook을 적용하였습니다. Custom Hook에서 제공하는 상태와 함수를 이용해 폼의 입력 값, 에러 상태, 입력 값 변경 이벤트, 폼 유효성 검증을 간편하게 처리할 수 있습니다.

결론

Custom Hook을 사용하여 폼 유효성 검증을 구현하면 코드의 재사용성을 높이고, 관리 및 유지보수를 쉽게 할 수 있습니다. 이 방법을 사용하면 React에서 폼 유효성 검증을 간편하게 처리할 수 있으며, 애플리케이션의 성능과 사용자 경험을 향상시킬 수 있습니다.

#React #CustomHook