Custom Hook을 사용한 유효성 검사 기능 구현

06 Nov 2023

customhook

이번 기술 블로그에서는 React에서 Custom Hook을 사용하여 유효성 검사 기능을 구현하는 방법을 알아보겠습니다.

Custom Hook이란?

Custom Hook은 React의 기능을 재사용하기 위한 패턴 중 하나입니다. Custom Hook을 사용하면 컴포넌트 간의 로직을 공유하고 상태를 관리할 수 있습니다.

유효성 검사 기능 구현을 위한 Custom Hook 생성

Custom Hook을 사용하여 유효성 검사 기능을 구현하기 위해 다음과 같은 단계를 따릅니다.

새로운 파일 useValidation.js를 생성합니다.
useValidation.js 파일에 다음과 같은 코드를 입력합니다.

import { useEffect, useState } from "react";

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

  useEffect(() => {
    if (isSubmitting) {
      const noErrors = Object.keys(errors).length === 0;
      if (noErrors) {
        // 유효성 검사를 통과한 경우 추가 작업을 수행합니다.
        console.log("유효성 검사 통과");
        setIsSubmitting(false);
      } else {
        // 유효성 검사를 통과하지 못한 경우 에러 메시지를 출력합니다.
        console.log("유효성 검사 실패");
      }
    }
  }, [errors]);

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

  const handleSubmit = (event) => {
    if (event) {
      event.preventDefault();
    }
    setErrors(validationRules(values));
    setIsSubmitting(true);
  };

  return {
    values,
    errors,
    handleChange,
    handleSubmit,
  };
};

export default useValidation;

useValidation라는 Custom Hook은 초기 상태와 유효성 검사 규칙을 전달받아 관련 로직을 처리합니다. Hook 내부에는 값, 에러, 값 변경 핸들러 및 제출 핸들러를 반환하며, 유효성 검사 결과에 따라 추가 작업을 수행합니다.

유효성 검사 규칙을 포함한 컴포넌트에서 Custom Hook을 사용합니다.

import React from "react";
import useValidation from "./useValidation";

const App = () => {
  // 초기 상태와 유효성 검사 규칙 정의
  const initialState = {
    email: "",
    password: "",
  };

  const validationRules = (values) => {
    let errors = {};

    if (!values.email) {
      errors.email = "이메일을 입력해주세요.";
    }

    if (!values.password) {
      errors.password = "비밀번호를 입력해주세요.";
    } else if (values.password.length < 6) {
      errors.password = "비밀번호는 6자 이상이어야 합니다.";
    }

    return errors;
  };

  // Custom Hook 사용
  const {
    values,
    errors,
    handleChange,
    handleSubmit,
  } = useValidation(initialState, validationRules);

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        value={values.email}
        onChange={handleChange}
      />
      {errors.email && <span>{errors.email}</span>}

      <input
        type="password"
        name="password"
        value={values.password}
        onChange={handleChange}
      />
      {errors.password && <span>{errors.password}</span>}

      <button type="submit">로그인</button>
    </form>
  );
};

export default App;

위의 예제 코드에서는 App 컴포넌트에서 Custom Hook인 useValidation을 사용하여 유효성 검사 기능을 구현하였습니다. 사용자가 이메일과 비밀번호를 입력하고 제출할 때마다 입력된 값과 유효성 검사 결과가 실시간으로 처리되고 출력됩니다.

마무리

이번 기술 블로그에서는 React에서 Custom Hook을 사용하여 유효성 검사 기능을 구현하는 방법을 알아보았습니다. Custom Hook을 활용하면 공통된 로직을 재사용하고 관련 상태를 관리하는데 유용하며, 유효성 검사와 같은 기능을 쉽게 구현할 수 있습니다.