[임희서] sprint8

[Imgaic]

주요 변경사항

• refactored checkValidationHook.js

멘토에게

• 미완성이지만 일단 소량이라도 제출합니다...

[airman5573]

안녕하세요 희서님, 짧은 코드리뷰지만 고민해보고 배울게 많은 PR이 될것 같습니다.
궁금하신 부분이 있으면 코멘트 달아주세요!

[airman5573]

잘 작성 해주셨습니다만, 몇가지 개선할 부분이 보입니다.

1. 삼항연산자를 동시에 두번 이상 사용하는건 자제해주세요. 가독성이 떨어집니다.
2. 하나의 훅 안에서 여러가지 유효성 검사를 하고 있는데, 이 부분을 분리해도 좋을것 같아요.

아래 코드를 참고해주세요!

import { useState, useMemo, useEffect } from 'react';

const EmailPattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/;

const emailValidator = (value) => {
  if (!value) return "이메일을 입력해주세요";
  if (!EmailPattern.test(value)) return "잘못된 이메일 형식입니다";
  return "";
};

const nicknameValidator = (value) => {
  if (!value) return "닉네임을 입력해주세요";
  return "";
};

const passwordValidator = (value) => {
  if (!value) return "비밀번호를 입력해주세요";
  if (value.length < 8) return "비밀번호를 8자 이상 입력해주세요";
  return "";
};

const confirmPasswordValidator = (value, password) => {
  if (value !== password) return "비밀번호가 일치하지 않습니다";
  return "";
};

export default function useValidationCheck(type) {
  const initialErrorMessages = useMemo(() => {
    if (type === "login") {
      return { emailError: "initial", passwordError: "initial" };
    }
    return {
      emailError: "initial",
      nicknameError: "initial",
      passwordError: "initial",
      confirmPasswordError: "initial"
    };
  }, [type]);

  const [errorMessages, setErrorMessages] = useState(initialErrorMessages);

  useEffect(() => {
    setErrorMessages(initialErrorMessages);
  }, [initialErrorMessages]);

  const setError = (field, message) => {
    setErrorMessages((prev) => ({ ...prev, [field]: message }));
  };

  const createValidator = (field, validatorFn) => (value, extraArg) => {
    setError(field, validatorFn(value, extraArg));
  };

  const validationFunctions = useMemo(() => {
    const baseFunctions = {
      checkEmail: createValidator("emailError", emailValidator),
      checkPassword: createValidator("passwordError", passwordValidator),
    };

    if (type !== "login") {
      return {
        ...baseFunctions,
        checkNickname: createValidator("nicknameError", nicknameValidator),
        checkConfirmPassword: createValidator("confirmPasswordError", confirmPasswordValidator),
      };
    }

    return baseFunctions;
  }, [type]);

  return { errorMessages, ...validationFunctions };
}

[airman5573]

코드 양을 줄이기 위해 따로 setError를 만드셨군요 👍