[기억하고 싶은 코드] 함수 재사용 리팩토링(왓챠피디아 로그인/회원가입 모달창 구현하기2)

• 로그인/회원가입 모달창을 구현하던 와중 함수재사용을 해보라는 코드리뷰를 받았다.
• 함수 재사용을 짜려면 아직 익숙하지 않아서 의식의 흐름대로 치면서 하드코딩할 때보다 심적 체감상 최소 5배(???) 이상 시간이 더 걸리는 거 같다. 결과적으로 효율과 가독성이 좋아질 것을 기대하며 도전해본다.
• 이고잉님이 맨날 말하던 게 떠오른다. 이 데이터가 5-10개가 아니라 백개 만개 그 이상일 때를 생각해보라고... (아직 감당불가)
• 실제 유저들이 생산하는 빅데이터를 다루는 그날까지ㅎㅎㅎ 화이팅입니다✨

🧨 리팩토링 이전 코드

  const handleLogin = () => {
    setIsLogin(!isLogin);
    isLogin
      ? setLoginInput({ ...loginInput, email: '', password: '' })
      : setSignInput({ ...signInput, name: '', email: '', password: '' });
  };

  const handleChange = e => {
    const { name, value } = e.target;
    isLogin
      ? setLoginInput({ ...loginInput, [name]: value })
      : setSignInput({ ...signInput, [name]: value });
  };

  const onReset = () => {
    setLoginInput({ ...loginInput, email: '', password: '' });
    setSignInput({ ...signInput, name: '', email: '', password: '' });
  };

💎 리팩토링

const INITIAL_INPUT = {
  name: '',
  email: '',
  password: '',
};

export default function Modal({ isLogin, changeLogin }) {
  const [loginInput, setLoginInput] = useState({
    INITIAL_INPUT,
  });
  const [signInput, setSignInput] = useState({
    INITIAL_INPUT,
  });

  const handleLogin = () => {
    changeLogin();
    isLogin ? resetInput('login') : resetInput('signUp');
  };

  const handleChange = e => {
    const { name, value } = e.target;
    isLogin
      ? setLoginInput({ ...loginInput, [name]: value })
      : setSignInput({ ...signInput, [name]: value });
  };

  const resetInput = type => {
    type === 'login'
      ? setLoginInput({ email: '', password: '' })
      : setSignInput({ name: '', email: '', password: '' });
  };

💎 ValidChecker 만들기

• 로그인/회원가입 모달에서 submit 할 때, input 값에 따른 CSS 조건 걸어줄 때 사용할 Valid체크 함수를 만들어보았다.
• 함수명을 IsInputValid라고 했으니 인풋값이 유효하니?라는 기능을 하는 함수이니 가독성을 높이고자 명명에 맞게 써보고자 했다.(이거 때문에 1시간은 더 걸린듯...)
• 유효하면 true를 반환하고, 유효하지 않으면 false를 반환하는 조건을 써주고, 함수를 가져다 쓸 때는 !IsInputValid라고 적어, 유효하지 않다면~~~를 해라라고 코드를 읽는 사람과 혼선을 줄이는 대화를 해보고자 했다.

const isIdValid = /^[A-Za-z0-9][A-Za-z0-9._-]+[@]{1}[a-z]+[.]{1}[a-z]{1,4}$/;
const isPwValid = /^(?=.*[a-zA-Z])((?=.*\d)|(?=.*\W)).{10,20}$/;

  const IsInputValid = item => {
    if (item === 'email') {
      if (inputValue.email && !isIdValid.test(inputValue.email)) {
        return false;
      } else {
        return true;
      }
    } else if (item === 'password') {
      if (inputValue.password && !isPwValid.test(inputValue.password)) {
        return false;
      } else {
        return true;
      }
    } else if (item === 'name') {
      if (inputValue.name && inputValue.name.length < 2) {
        return false;
      } else {
        return true;
      }
    }
  };

• 위의 함수는 input값에 따른 CSS 속성을 준다거나, input창 실시간 state값에 따라 경고메세지를 띄운다거나 하는 용도로 사용했다.

스타일드 컴포넌트 적용 코드

• 깨끗하지 않은 상태라 올리기 좀 부끄럽지만... 코드리뷰 받고 고치면 다시 업로드 해보겠슴당...

 <FormInput type={type} IsInputValid={IsInputValid}>
      <InputWrapper>
        <Inputbox
          type={type}
          name={type}
          value={inputValue}
          placeholder={text}
          onChange={handleChange}
          autoComplete="off"
        />
        {inputValue && (
          <InputAlert IsInputValid={IsInputValid}>
            {(type === 'name' && !IsInputValid('name')) ||
            (type === 'email' && !IsInputValid('email')) ||
            (type === 'password' && !IsInputValid('password')) ? (
              <>
                <BsFillXCircleFill
                  className="delete"
                  onClick={() => resetInput(format.type)}
                />
                <BsExclamationCircle className="false" />
              </>
            ) : (
              <BsCheckCircle className="true" />
            )}

const FormInput = styled.div`
  height: 44px;
  margin: 8px 0;
  padding: 11px 0;
  border: ${props =>
    (props.type === 'email' && !props.IsInputValid('email')) ||
    (props.type === 'password' && !props.IsInputValid('password'))
      ? '1px solid rgb(245, 0, 0)'
      : 'none'};
  border-radius: 6px;
  background-color: ${props =>
    (props.type === 'email' && !props.IsInputValid('email')) ||
    (props.type === 'password' && !props.IsInputValid('password'))
      ? 'rgb(255, 240, 240)'
      : 'rgb(245, 245, 245)'};
`;

• (앗... 비밀번호 정규식 안걸었다... 경고창 메세지랑 걸어둔 조건이 다르군여...... 수정하러갑니다...) => 수정완료💐!