<aside> 💡 여기서 commit 으로 확인할 수 있습니다. signup 관련 변경점은 이슈번호 1번 ~ 3번입니다.

</aside>

문제점

1. inputs 의 onChange 핸들러가 어수선하다.

<aside> 💡 보통의 inputs 라면 onChange 에 간단히 setState 만 하면 됩니다. 하지만 해당 코드에서는 여러 경우의 수를 한번에 다루려고 했기 때문에 코드가 어수선해졌습니다.

</aside>

const handleChange = useCallback(
    e => {
      const { name, value } = e.target;

      if (creditModalOpen) {
        setUserInfo({
          ...userInfo,
          cardInfo: {
            ...userInfo.cardInfo,
            [name]: value,
          },
        });
        return;
      }
      if (name === 'passwordConfirm') {
        setPasswordConfirm(value);
        return;
      }
      setUserInfo({
        ...userInfo,
        [name]: value,
      });
    },
    [creditModalOpen, userInfo],
  );

2. input 의 validation 검사를 switch문 을 통해 해결했다.

<aside> 💡 switch statement 의 특성상 코드가 길어졌습니다. 각각의 case 내부에서는 완전히 동일한 작업을 하고 있기 때문에 해당 함수의 모든 내용은 중복됩니다.

</aside>

// 코드가 너무 길어서 생략했습니다.
const checkValidation = e => {
    const { name } = e.target;

    switch (name) {
      case 'id':
        setErrors({
          ...errors,
          [name]: idValidation(userInfo.id).message,
        });
        return false;
		....

리팩토링

1. handleChange 리팩토링

커밋 보러가기1 커밋 보러가기2

<aside> 💡 리팩토링하기 앞서, 왜 이렇게 만들었는지를 생각해봤습니다. 이유는 현재 inputs 의 값들은 userInfo 라는 객체의 값이고, submit 이 되는 순간 userInfo 는 일체의 핸들링 없이 user 로 만들어집니다. 따라서 userInfo 객체에는 가입에 필요없는 정보가 있어서는 안됩니다. 때문에 저장이 되면 안되는 값인 passwordConfirm 을 예외적으로 관리하고 있는것으로 보입니다.

</aside>

1. 구조분해 할당을 사용해보자.

아래는 현재 submit 이 될 때 userInfo 라는 객체를 바로 사용해서 저장하는 코드입니다.

// 이 부분 때문에 `passwordConfirm` 은 userInfo에서 예외적으로 관리한다.
saveUserInfo(userInfo);

하지만 문법만 잘 활용하면 passwordConfirm 을 예외적으로 관리하지 않을 수 있습니다. 흔히 말하는 구조분해할당 방법을 이용해서 리팩토링 해보겠습니다.

// userInfo 에서 passwordConfirm 을 분리하기
const { passwordConfirm, ...userInfoExcepConfirm } = userInfo;
saveUserInfo(userInfoExcepConfirm);