[리액트] 회원가입 기능 구현 (공통 컴포넌트 분리. CheckBox)

이번 작업에서는 회원가입 및 로그인 기능 구현 과정에서 발생한 여러 문제를 정리하고, 해결 방법 및 코드 리팩토링 진행하였습니다. 

 

1. 회원가입 기능 구현

✅ 주요 구현 내용

1. 비밀번호 유효성 검사
   • 비밀번호 입력값이 비어 있으면 “값을 입력하세요” 에러 출력
   • 입력이 되어 있는 상태라면 “형식 오류” 에러 출력
2. 아이디 중복 확인
   • “중복 확인” 버튼 클릭 시, 서버에서 해당 아이디의 존재 여부 확인
   • 이미 존재하면 “이미 존재하는 아이디입니다” 메시지 표시
   • 존재하지 않으면 “사용 가능한 아이디입니다” 메시지 표시
3. 비밀번호 암호화 처리
   • 비밀번호 입력 필드를 단일화하고, 내부적으로 비밀번호와 비밀번호 확인 필드 모두 암호화 처리
4. 회원가입 경로별 Role 구분
   • 의사용/일반 사용자용 회원가입 페이지가 분리되어 있으므로
     location.path로 현재 경로를 받아 role 값을 설정한 뒤 백엔드로 전달

 

2. 구현 중 발생한 문제

⚠️ 문제 1. 체크박스 중복 발생

로그인과 회원가입 페이지에서 모두 “비밀번호 보기” 기능을 구현하면서,
같은 CheckBox 컴포넌트를 사용하다 보니 state 충돌 문제가 발생했습니다.

원인

• 두 페이지가 동일한 컴포넌트를 import하면서 동일한 상태(state)를 공유할 가능성 존재

해결

• 각 페이지 내에서 독립적인 상태를 관리하도록 수정
• 체크박스 컴포넌트를 별도 파일로 분리하고, 각 페이지에서 show 상태를 선언 후 props로 전달

✅ 수정된 CheckBox 컴포넌트

function CheckBox({ boxName, show, setShow }) {
	return ( 
         <label className="flex items-center mx-5">
              <input 
                   name={boxName} 
                   type="checkbox" 
                   className="mx-2" 
                   checked={show} 
                   onChange={(e) => setShow(e.target.checked)} 
              /> {boxName} 
         </label> ); 
} 

export default CheckBox;

적용 예시

function CheckBox({ boxName, show, setShow }) { 
     return ( 
          <label className="flex items-center mx-5"> 
               <input 
                    name={boxName} 
                    type="checkbox" 
                    className="mx-2" 
                    checked={show} 
                    onChange={(e) => setShow(e.target.checked)} 
               /> {boxName} 
          </label> ); 
  } 
  
  export default CheckBox;

 

---

3. 예외 처리 로직 개선

초기 구현에서는 회원가입 요청 시 발생하는 에러 처리 코드가 지나치게 길고 복잡했습니다.
이를 해결하기 위해, 에러 처리 전용 함수를 분리하여 관리하도록 리팩토링했습니다.

 

기존 코드 (복잡한 형태)

fetchSignUp(signUpInfo)
  .then((res) => {
    localStorage.setItem("accessToken", res.data.token.trim());
    setErrors(initialErrors);
    navigate("/");
  })
  .catch((err) => {
    const errorMessages = err.response?.data;
    const Errors = {};

    if (err.response?.status === 409 || err.response?.status === 401) {
      if (errorMessages.includes("아이디")) {
        Errors.loginIdError = errorMessages;
      }
      if (errorMessages.includes("비밀번호")) {
        Errors.checkPasswordError = errorMessages;
      }
    }

    if (err.response?.status === 400) {
      errorMessages.forEach((element) => {
        if (element.includes("아이디")) Errors.loginIdError = element;
        if (element.includes("비밀번호")) {
          if (e.target.password.value === "" && element.includes("필수")) {
            Errors.passwordError = element;
          }
          if (e.target.password.value !== "" && element.includes("형식")) {
            Errors.passwordError = element;
          }
        }
        if (element.includes("비밀번호") && element.includes("재입력")) {
          Errors.checkPasswordError = element;
        }
        if (element.includes("이름")) Errors.nameError = element;
        if (element.includes("이메일")) {
          if (e.target.email.value === "" && element.includes("필수")) {
            Errors.emailError = element;
          }
          if (e.target.email.value !== "" && element.includes("형식")) {
            Errors.emailError = element;
          }
        }
      });
    }

    setErrors((prev) => ({ ...prev, ...Errors }));
  });

 

 

개선된 코드 (함수 분리)

fetchSignUp(signUpInfo)
  .then((res) => {
    localStorage.setItem("accessToken", res.data.token.trim());
    setErrors(initialErrors);
    navigate("/");
  })
  .catch((err) => {
    const errorMessages = err.response?.data;
    let errors = {};

    if (err.response?.status === 409 || err.response?.status === 401) {
      errors = handleError(errorMessages);
    }

    if (err.response?.status === 400) {
      errors = handleValidationError(errorMessages, isPasswordEmpty, isEmailEmpty);
    }

    setErrors((prev) => ({ ...prev, ...errors }));
  });

 

4. 입력 폼 구조에 대한 고민

현재 로그인과 회원가입 페이지는 동일한 입력 폼 컴포넌트를 사용하고 있습니다.
하지만 다음과 같은 문제가 있습니다.

• 회원가입 시에는 아이디 중복 확인 버튼, 비밀번호 보기 체크박스 등 추가 요소 필요
• 로그인 폼은 간단하지만 회원가입은 기능이 많아 공통 컴포넌트로 관리 시 복잡도가 증가

결론

공통 컴포넌트로 유지하기보다는,기본 입력 폼(BaseForm)을 공통으로 두고
로그인/회원가입 페이지별로 필요한 추가 요소를 확장하는 방식이 적절하다고 판단했습니다.

---

5. 폴더 구조 개선 제안

현재 components 폴더 안에 모든 컴포넌트가 들어있는데 공통 컴포넌트를 관리하기 위해 다음과 같이 구조를 나누었습니다. 

 

components/
 ├── common/
 │   |__CheckBox.jsx
 └── LoginForm.jsx
 └── SignUpForm.jsx