리팩토링이란?

• 결과의 변경 없이 코드의 구조를 재조정함
• 가독성을 높이고 유지보수를 편하게 한다.
  • 버그 수정, 새로운 기능 추가가 아님

출처) 리팩터링-위키백과

리팩토링

중첩된 삼항연산자

{alertModal ? (
        passId == true ? (
          <AlertModal
            closeAlertModal={closeAlertModal}
            messages={passIDMessage}
          />
        ) : (
          <AlertModal
            closeAlertModal={closeAlertModal}
            messages={failpassIdMessage}
          />
        )
      ) : (
        <></>
      )}

      {alertModal ? (
        tryCheckId === 'none' ? (
          <AlertModal closeAlertModal={closeAlertModal} messages={tryIdCheck} />
        ) : (
          <></>
        )
      ) : (
        <></>
      )}

      {alertModal ? (
        success == '성공' ? (
          <AlertModal
            closeAlertModal={closeAlertModal}
            messages={successJoin}
          />
        ) : (
          <></>
        )
      ) : (
        <></>
      )}
      {alertModal ? (
        success == '실패' ? (
          <AlertModal closeAlertModal={closeAlertModal} messages={failJoin} />
        ) : (
          <></>
        )
      ) : (
        <></>
      )}
      {alertModal ? (
        success == '전화번호오류' ? (
          <AlertModal
            closeAlertModal={closeAlertModal}
            messages={checkPhoneNum}
          />
        ) : (
          <></>
        )
      ) : (
        <></>
      )}

코드 설명

• 각 조건에 따라 다른 컴포넌트가 UI에 보여진다.
• 삼항연산자를 중첩하여 사용했다.

문제점

• 삼항연산자는 가독성을 위해 사용하는데, 삼항연산자를 이처럼 중첩해서 사용하면 오히려 가독성이 떨어지고 유지보수가 어려워진다.

리팩토링

• if-else문을 사용하여 리팩토링한다.

const showAlert = () => {
    if (tryCheckId === 'none') {
      return (
        <AlertModal closeAlertModal={closeAlertModal} messages={tryIdCheck} />
      );
    } else if (passId === '아이디 통과') {
      return (
        <AlertModal
          closeAlertModal={closeAlertModal}
          messages={passIDMessage}
        />
      );
    } else if (passId === '아이디 중복') {
      return (
        <AlertModal
          closeAlertModal={closeAlertModal}
          messages={failpassIdMessage}
        />
      );
    } else if (success === '성공') {
      return (
        <AlertModal closeAlertModal={closeAlertModal} messages={successJoin} />
      );
    } else if (success === '실패') {
      return (
        <AlertModal closeAlertModal={closeAlertModal} messages={failJoin} />
      );
    } else if (success === '전화번호오류') {
      return (
        <AlertModal
          closeAlertModal={closeAlertModal}
          messages={checkPhoneNum}
        />
      );
    }
  };

AlertModal은 알림창 컴포넌트이다. 리팩토링 하면서 전보다 훨씬 낫다! 라고는 생각했지만, 지금 블로그를 쓰면서 다시 보니 가독성..은 여전히 갈 길이 먼 것 같다.
AlertModal 컴포넌트 로직을 다시 짜서 조금 더 사용하기 쉽고 간결한 컴포넌트로 바꾸는것부터 해야할 것 같다.

중첩된 조건문

!checkPassAgainRegex ? (
      checkPass.length > 0 ? (
          <p className={css.warning}>
              비밀번호는 영문,숫자,특수기호 중 2가지 이상 조합하여 10자리
                이상 16자리 이하 입니다.
          </p>

코드 설명

• checkPassAgainRegex : 비밀번호 확인 input 유효성검사 통과 여부(boolean)
• checkPass.length > 0 : 1자리 이상 입력 시
  → p태그 나타남

문제점

• 조건문을 중첩해서 사용하여 가독성이 떨어진다.

리팩토링

• 논리연산자로 변환하여 리팩토링한다.

{!checkPassRegex && pass.length > 0 && (
    <p className={css.warning}>
      비밀번호는 영문,숫자,특수기호 중 2가지 이상 조합하여 10자리
      이상 16자리 이하 입니다.
    </p>
 )}

과거의 나는 삼항연산자를 중첩해서 사용하는걸 좋아했나보다🤣
지금이라도 알게되어서 정말 다행이라고 생각한다.
앞으로는 삼항연산자를 사용할 때 조금 더 신경을 써야겠다.