가입하지 않은 이메일인데 왜 가입되었다고 하는거지? Dependency Array를 주목해 !

회원가입 페이지를 구현하던 중 버그를 발견했다.

버그 살펴보기

🐛 이미 가입된 이메일이라는 결과가 나오고 가입하지 않은 이메일 주소를 입력했을 때 이미 가입된 이메일이라는 에러 출력 오류

• hookie17@gmail.com이 이메일은 이미 가입되어있던 이메일
  
• hookie18@gmail.com, hookie19@gmail.com이 이메일은 가입하지 않은 이메일 (프로필 설정 페이지로 넘어갔어야 함)
• 실행 이미지를 보면 숫자 7 → 8, 9로만 바꾼 것을 기억하자
• 

🐛 위에서 이미 가입되어있던 이메일이라고 하던 hookie18@gmail.com가 다 지우고 입력했더니 프로필 설정 페이지로 이동하는 오류

• 

🐛 이미 가입되어있는 이메일을 유효성 확인 후 주소 일부만 지우고 그대로 입력하면 프로필 설정 페이지로 이동하는 오류

• 

---

뭐가 문제일까 상태가 문제일까 고민을 하다가 내가 지금 버튼을 눌렀을 때 보내는 값이 뭔지 확인을 해보니 이메일 값이 이상하게 전달되고 있었는데,

hookie10@gmail.com 이메일은 이미 가입된 이메일이 맞아서 에러메시지가 출력되는게 맞고, 페이로드를 보면 hookie10@gmail.com 이라고 값이 잘 전달된 것은 맞았다.

근데 여기 사진을 보면 hookie10@gmail.com 에서 0에 커서를 댄 뒤 0만 지우고 9로 바꾼 뒤 요청한 값을 보면 hookie1@gmail.com 으로 전달된 것을 확인할 수 있다.
hookie1@gmail.com 이메일은 이미 가입되어있던 이메일이라 저렇게 요청이 가서 hookie19@gmail.com 가 가입하지 않은 이메일이라도 에러메시지가 출력이 되었던 것이다.

앞에 작성한 이미 가입 되어있던 이메일hookie17@gmail.com에서 com을 지우고 다시 작성했을 때 회원가입이 되어 프로필 설정 페이지로 넘어간 오류의 페이로드를 보면 아래 사진처럼 이메일 값이 잘못 전달되어 회원가입이 성공했던 것이다.

이렇게 값을 잘못 전달한 것을 확인 할 수 있었다.

뭐가 문제일까?

일단 내가 구현한 로직의 순서는 대략 이렇다.
1. 이메일, 비밀번호, 비밀번호 확인 인풋을 입력 할 때마다 유효성 검사 진행 (버튼 비활성화)
2. 세 개의 인풋이 모두 입력이 되어있고, 유효성이 통과해야 버튼 활성화 (버튼 활성화)
3. 버튼을 눌렀을 때 API 통신을 하고 이미 가입된 이메일인지 아닌지 확인
3.1 이미 가입 된 이메일이면 버튼 비활성화
3.2 가입하지 않은 이메일이면 프로필 설정 페이지로 이동

버튼 활성화와 인풋 값 상태 코드는 이렇다.
비활성화일 때 true
활성화일 때 false

const [signUpEmail, setSignUpEmail] = useState('');
const [signUpPassword, setSignUpPassword] = useState('');
const [checkPwValue, setCheckPwValue] = useState('');

const [buttonNotAllow, setButtonNotAllow] = useState(true);

// 회원가입 버튼 클릭하면 API 통신하고 유효성 검사 로직 실행
 const handleJoinClick = useCallback(
    async (e) => {
      e.preventDefault();

      try {
        ...통신 로직 (여기에 signUpEmail을 담아서 통신)

        ...이메일 중복 검사 로직
      } catch (error) {
        ...에러 핸들링 코드
      }
    },
    [buttonNotAllow]
  );

위 코드에서의 문제는 useCallback의 Dependency Array의 값이었다.

1. 인풋 세개 입력하지 않았을 때 buttonNotAllow : true
2. 인풋 세개 모두 입력했을 때 buttonNotAllow : false
   현재 이메일 인풋에 입력한 값은 wangtest@test.com이고, 이때 buttonNotAllow의 값이 변했기 때문에 signUpEmail : wangtest@test.com 으로 값이 들어간다.
3. 버튼을 누르면 유효성 로직이 실행되어 이메일 중복 여부 판단하고 중복이면 비활성화가 된다.
   wangtest@test.com은 기존에 가입되어있던 이메일이라 버튼이 비활성화 된다.
   buttonNotAllow : true

4. wangtest@test.com에서 wangtest 부분을 지울 때를 주목해야하는데 buttonNotAllow : true 였던 버튼 상태가 t를 지우는 순간 buttonNotAllow : false 로 상태가 변하고 signUpEmail의 값은 wangtes@test.com 가 된다.
   t를 지우고 아무리 다른걸 입력하거나 지워도 buttonNotAllow : false 인 상태이기 때문에 상태가 변하지 않아서 signUpEmail의 값은 변하지 않았던 것이다.
   

해결

signUpEmail이 입력 될 때마다 업데이트를 해주면 되는 것이어서 Dependency Array의 값을 기존 buttonNotAllow에서 signUpEmail로 변경해주었다.

Dependency Array의 이해가 부족하여 일어났던 문제였기에 다시 톺아보아야겠다.