DiaryProject(React) - 회원가입 폼(3)

회원가입 폼 개선 작업 진행

1. 중복 함수 제거
2. form 유효성 검사
3. 개선 리스트

개선점 - 1. 중복 함수 제거

문제 인식

• 기존 코드에서는 함수 4개가 사용되지만 결국 같은 기능을 하고 있다.(input event 발생 > Ref value 재할당)
• value값을 할당하는데에 변화가 생기면 함수하나하나 고쳐야 하는 비효율 발생
• 태그 부분에서 각 다른 함수의 이름을 붙이는 것 또한 유지보수에서 비효율이 발생하는 원인.

기존코드 
  const onChangeName = (e) => {
    nameValue.current = e.target.value;
  };
  const onChangeEmail = (e) => {
    emailValue.current = e.target.value;
  };
  const onChangePw = (e) => {
    passwordValue.current = e.target.value;
  };
  const onChangePwCk = (e) => {
    pwCheckValue.current = e.target.value;
  };
.
.
return
    <input type='text' id='nameInput' onChange={onChangeName} />
    <input type='text' id='emailInput' onChange={onChangeEmail} />
    <input type='text' id='pwInput' onChange={onChangePw} />
    <input type='text' id='pwCkInput' onChange={onChangePwCk} />

개선과정

1. 4개의 함수를 1개의 함수에서 관리할 수 있도록 변경.
2. Tag 부분 또한 1개의 함수로 통일할 수 있어서 비효율 발생을 감소시킴.

1 const onChange = (e) => {
1    if (e.target.id === 'nameInput') {
      nameValue.current = e.target.value;
1    } else if (e.target.id === 'emailInput') {
      emailValue.current = e.target.value;
1    } else if (e.target.id === 'pwInput') {
      passwordValue.current = e.target.value;
1   } else if (e.target.id === 'pwCkInput') {
      pwCheckValue.current = e.target.value;
    }; 
  .
  .
  return
2    <input type='text' id='nameInput' onChange={onChange} />
2    <input type='text' id='emailInput' onChange={onChange} />
2    <input type='text' id='pwInput' onChange={onChange} />
2    <input type='text' id='pwCkInput' onChange={onChange} />

추가로 개선하고 싶은 점

• 함수를 줄인 것뿐이지 코드의 양을 줄이진 못했다. 할당값에 변화가 생기면 4개의 코드를 수정해야 하는 것은 마찬가지이기 때문에 더 효율적인 방법이 있는지 고민해야 함.
  - ex) Ref값으로 DOM을 조금 더 세심하게 컨트롤 하는 방식

개선점 - 2. form 유효성 검사

문제 인식

• 렌더링(제출 시) 될 때만 유효성 검사가 진행되어 회원가입 편의성 낮아짐.
• 함수 내 삼항연산자 및 태그 반환으로 인해 코드 가독성이 떨어짐.

기존코드
  const checkPw = () => { 
    return pwCheckValue.current === passwordValue.current ? null : (
      <>
        <span className='formAlert'>비밀번호가 일치하지 않습니다.</span>
      </>
    );
  };
const checkEmail = () => {
    const reg = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
    return reg.test(emailValue.current) ? null : (
      <>
        <span className='formAlert'>이메일 형식에 맞게 입력해주세요.</span>
      </>
    );
  };
.
.
<input type='text' id='emailInput' onChange={onChangeEmail} />
{checkEmail()}    
<input type='text' id='pwCkInput' onChange={onChangePwCk} />
{checkPw()}

개선과정

1. 이메일 유효성 검사 정규표현식은 전역 변수로 선언(함수 밖으로 뺐음)
2. Tag에 직접 값을 넣고 제어하기 위해 State새로 선언.
3. onChange Event Callback function 내부에 삼항연산자로 실시간 유효성 검사 결과 반환
4. onSubmit 함수에 empty / email / password 유효성 검사(return을 통해 회원가입 제출 중단)

1 const reg = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;

const SignUp = memo(() => {
  ...
2 const [emailAlert, setEmailAlert] = useState('');
2 const [passwordAlert, setPasswordAlert] = useState('');

  const onChange = (e) => {
    ...
3 	reg.test(emailValue.current) ? setEmailAlert('유효한 이메일입니다.') : setEmailAlert('이메일 형식에 맞게 작성해주세요.');
  };

    const onSubmit = (e) => {
    e.preventDefault();
4    if (!emailValue.current && !nameValue.current && !passwordValue.current && !pwCheckValue.current) return;
    // input 유효성 검사
4    if (!reg.test(emailValue.current)) return;
    // email 유효성 검사
4    if (pwCheckValue.current !== passwordValue.current) {
      // 비밀번호 유효성 검사
      passwordFunc(); // password input하단으로 알림 표시
      return;
    }

   return    
    <input type='text' id='emailInput' onChange={onChange} />
3    	<div>{emailAlert}</div>
    <input type='text' id='pwCkInput' onChange={onChange} />
4  		<div>{passwordAlert}</div>

추가로 개선하고 싶은 점

• input 빈칸 유효성 검사를 더 깔끔하게 만들고 싶음.
• Tag 값을 위해 새로 선언한 state도 2개가 아닌 1개의 State로 묶을 수 같음(emailAlert,passwordAlert > alert.email,alert.password])

개선 리스트

1. 중복 클릭, 중복 엔터로 인해 같은 데이터가 여러번 제출되는 현상 방지
2. 데이터 생성 시 고유 uid 부여
3. 데이터 전송 방식 / 데이터 구조 REST API / Promise 참고하여 재작성
4. 회원가입 폼 CSS