[React]로그인, 회원가입 컴포넌트 구현하기(2/2 - 회원가입)

개요

지난 포스트인 로그인에 이어 회원가입에 대해서도 알아보겠습니다.

백엔드측의 Api가 아직 완성되지 않아 이를 제외한 부분에 대해서만 작성하겠습니다.(추후 업데이트 예정)

컴포넌트 개요

SignUp 컴포넌트는 사용자로부터 이메일, 비밀번호, 인증번호를 입력받아 회원가입을 처리합니다.

상태 관리

React의 useState 훅을 사용하여 컴포넌트 상태를 관리합니다. 여기에는 입력 필드 값, 에러 메시지, 폼 유효성, 로딩 상태 등이 포함됩니다.

// 로딩 상태 관리 훅
const [isLoading, setIsLoading] = useState(false);

// 입력 필드 값 관리 훅
const [values, setValues] = useState({
  id: "",
  password: "",
  passwordConfirm: "",
  authenticationNumber: "",
});

// 유효성 검사 메시지 관리 훅
const [message, setMessage] = useState({
  id: "",
  password: "",
  passwordConfirm: "",
  authenticationNumber: "",
});

// 폼 유효성 관리 훅
const [isFormValid, setIsFormValid] = useState(false);

유효성 검사

이메일 정규식: 이메일 주소의 형식이 올바른지 검사합니다.
비밀번호 정규식: 비밀번호가 영문, 숫자, 특수문자를 포함하고, 8자 이상 15자 이하인지 검사합니다.

// 이메일 정규식
const idReg =
  /^[A-Za-z0-9]([-_.]?[A-Za-z0-9])*@[A-Za-z0-9]([-_.]?[A-Za-z0-9])*\.[A-Za-z]{2,3}$/;

// 패스워드 정규식
const passwordReg = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,15}$/;

handleValidation 함수는 입력된 값이 정규식에 맞는지 검증하고, 오류 메시지를 설정합니다.

const handleValidation = (field, value) => {
  let errorMsg = ""; // 에러 메시지 초기화
  switch (field) {
    case "id":
      errorMsg =
        value.trim() === "" // 입력 값이 비어있는지 확인
          ? "이메일을 입력해주세요." // 입력 값이 비어있을 때 에러메시지
          : idReg.test(value) // 정규식 검사
          ? "" // 이메일 형식이 올바른 경우
          : "올바른 이메일을 입력해주세요."; // 이메일 형식이 올바르지 않은 경우
      break;
    case "password":
      errorMsg =
        value.trim() === "" // 입력 값이 비어있는지 확인
          ? "비밀번호를 입력해주세요." // 입력 값이 비어있을 때 에러메시지
          : passwordReg.test(value) // 정규식 검사
          ? "" // 비밀번호 형식이 올바른 경우
          : "영문,숫자,특수문자 포함 8자 이상 입력해주세요."; // 비밀번호 형식이 올바르지 않은 경우
      break;
    case "passwordConfirm":
      errorMsg =
        value.trim() === ""
          ? "비밀번호를 확인해주세요."
          : values.password === value
          ? ""
          : "비밀번호가 일치하지 않습니다.";
      break;
    default:
      break;
  }
  setMessage((prev) => ({ ...prev, [field]: errorMsg })); // 에러 메시지 상태 업데이트
};

폼 유효성 관리

useEffect를 활용하여 입력 필드 값과 에러 메시지를 모니터링하며 폼의 유효성을 관리합니다.

useEffect(() => {
  // 모든 입력 값이 채워져 있는지 확인
  const areAllValuesProvided = Object.values(values).every(
    (value) => value.trim() !== ""
  );
   // 모든 메시지가 비어있는지 확인하여 폼의 유효성 상태를 설정
  const isEveryMessageEmpty = Object.values(message).every(
    (msg) => msg === ""
  );
  // 입력 값이 모두 제공되었고, 모든 유효성 검사 메시지가 비어있다면 폼이 활성화됨
  setIsFormValid(areAllValuesProvided && isEveryMessageEmpty);
}, [values, message]);

회원가입 핸들러

회원가입 버튼 클릭 시 호출되는 signUpHandler 함수는 폼의 유효성을 검사하고, 유효한 경우 회원가입을 처리합니다. 성공적인 회원가입 후에는 페이지 이동이 이루어집니다.

const signUpHandler = async (e) => {
  e.preventDefault();
  setIsLoading(true);

  // 입력 필드가 비어 있는 경우 에러 메시지 설정
  handleValidation("id", values.id);
  handleValidation("password", values.password);
  handleValidation("passwordConfirm", values.passwordConfirm);

  if (!isFormValid) {
    setIsLoading(false); // 폼 유효성 검사 실패 시 로딩 상태 비활성화
    return;
  }
  try {
    // 실제 API 호출 (현재는 주석 처리됨)
    // const response = await axios.post("/public-api/v1/member/join", {
    //   email: values.id,
    //   password: values.password,
    //   // 필요한 추가 데이터
    // });
    // navigate("/signupcomplete");
    navigate("/signupcomplete");
  } catch (error) {
    if (axios.isAxiosError(error)) {
      const errorMessage = error.response?.data.message;
      if (errorMessage === "가입된 이메일이 이미 존재합니다.") {
        setMessage((prev) => ({
          ...prev,
          id: "이미 가입된 이메일입니다.",
        }));
      }
    }
  } finally {
    setIsLoading(false);  // 회원가입 프로세스 종료, 로딩 상태 비활성화
    }
  }
};

입력 필드 변경 핸들러

handleInputChange 함수는 입력 필드의 변경을 감지하여 상태를 업데이트합니다.

const handleInputChange = (e) => { 
  const { name, value } = e.target; // 입력 필드 이름과 값 추출
  setValues((prev) => ({ ...prev, [name]: value })); // 입력 값 상태 업데이트
  handleValidation(name, value); // 입력 값에 대한 유효성 검사
};

1편 보러가기 - 로그인