코드 리팩토링

처음에는 코드를 작동되게만 했지만 갈수록 코드 양도 많아져 무슨 기능을 하는지 까먹을떄가 있다 그럴떄 코드들이 지저분하게 되어있어 한번에 파악하기가 쉽지 않았다. 최근에 코드 리팩토링에 대해 배우게 되어 나의 프로젝트에 적용하기로 하였다.

1. 회원가입 페이지 리펙토링 전

if문이 submit안에 반복적으로 들어간다. alert창은 ui이 적으로 별로이기 떄문에 회원가입중 누락된 부분은 하단에 *필수정보라고 나오게 바꾸고싶다

 const onSubmit = useCallback(
    (e) => {
      e.preventDefault();
      if (mem_id === "") {
        alert("이메일을 입력해주세요");
        return;
      }
      const formIdData = new FormData();
      formIdData.append("mem_id", mem_id);
      if (!duplicateCheckDisplay) {
        dispatch({
          type: DUPLICATE_CHECK_REQUEST,
          data: formIdData,
        });
      }

      if (mem_pw === "") {
        alert("비밀번호를 입력해주세요");
        return;
      }
      if (passwordError) {
        alert("비밀번호가 일치하지 않습니다.");
        return;
      }
      if (mem_name === "") {
        alert("이름을 입력해주세요");
        return;
      }
      if (mem_nickname === "") {
        alert("닉네임을 입력해주세요");
        return;
      }
      if (agree === false) {
        alert("개인정보 활용을 동의해주세요");
        return;
      }
      if (duplicateCheckDisplay) {
        alert("중복체크 해주세요!");
        return;
      }

      if (mem_pw !== passwordCheck) {
        return setPasswordError(true);
      }
      if (!agree) {
        return setAgree(false);
      }
      const formData = new FormData();
      formData.append("mem_name", mem_name);
      formData.append("mem_id", mem_id);
      formData.append("mem_pw", mem_pw);
      formData.append("mem_nickname", mem_nickname);
      formData.append("mem_flag", agree);

      dispatch({
        type: SIGN_UP_REQUEST,
        data: {
          mem_name,
          mem_id,
          mem_pw,
          mem_nickname,
          mem_flag: agree,
        },
        data: formData,
      });
    },
    [mem_id, mem_pw, mem_name, mem_nickname, agree, duplicateCheckDisplay]
  );

2. 회원가입 페이지 리펙토링 후

if문 코드를 줄이고 alert창을 없애고 새로운 ui를 만들었다.  

const onSubmitSignUp = useCallback(
    (e) => {
      e.preventDefault();
      if (mem_id === '') {
        dispatch({
          type: LOGIN_FAILD,
        });
        return;
      }

      const formIdData = new FormData();
      formIdData.append('mem_id', mem_id);

      if (duplicateCheckDisplay) {
        dispatch({
          type: DUPLICATE_CHECK_REQUEST,
          data: formIdData,
        });
        return;
      }

      if (
        mem_pw === '' ||
        mem_pw !== passwordCheck ||
        passwordError ||
        mem_name === '' ||
        mem_phone === '' ||
        mem_nickname === '' ||
        agree === false ||
        duplicateCheckDone === false
      ) {
        dispatch({
          type: LOGIN_FAILD,
        });
        return;
      }

      const formData = new FormData();
      formData.append('mem_id', mem_id);
      formData.append('mem_pw', mem_pw);
      formData.append('mem_name', mem_name);
      formData.append('mem_nickname', mem_nickname);
      formData.append('mem_phone', mem_phone);
      formData.append('mem_flag', agree);

      dispatch({
        type: SIGN_UP_REQUEST,
        data: formData,
      });
    },
    [
      mem_id,
      mem_pw,
      mem_name,
      mem_phone,
      mem_nickname,
      agree,
      duplicateCheckDisplay,
    ],
  );

3. 회원가입 코드

회원가입 하단에 필수정보 표시 코드

회원 가입시 로그인 실패 하고 해당 value가 없는 회원가입 정보에 필수정보라고 표시된다

        <input
          name="mem_pw"
          placeholder="비밀번호를 입력해주세요"
          type="password"
          value={mem_pw}
          onChange={onChangePassword}
        />
        {signUpFaild ? null : mem_pw ? null : (
          <div className={style.signupCheck}>{`*필수 정보입니다.`}</div>
        )}

 

회원 가입 페이지