❌ 잘못된 시도

//duplicationCheckAPI.js
const duplicationCheckAPI = async(userid) => {
     await axios.post("http://localhost:8000/user/duplicationcheck/", {
         userid: userid,
     })
     .then(() => {
         console.log('회원가입 성공');
     })
     .catch(function (error) {
         console.log(error);
     });
 };

//SignUpPage.js
const duplicationCheck = () => {
     duplicationCheckAPI(userid)
     .then((response) => {
         if(response === false){
           alert('사용 가능한 아이디입니다.');
           setUsableId(true);
         }
         else {
           alert('중복된 아이디입니다. 다시 시도하세요.');
           setUserid('');
         }
     })
   }

⚠️ 오류가 난 부분
api의 response = back이 주는 return 값
page의 response = api에서 넘겨주는 값

---

💡 해결

//duplicationCheckAPI.js
const duplicationCheckAPI = async(userid) => {
    let return_value;
    await axios.post("http://localhost:8000/user/duplicationcheck/", {
        userid: userid,
    })
    .then((response) => {
        return_value = response.data;
    })
    .catch(function (error) {
        console.log(error);
        return_value = true;
    });
    return return_value
};

response가 존재하면, return_value = response
response가 존재하지 않으면, return value = true
(기본값: false)

//SignUpPage.js
const duplicationCheck = () => {
    duplicationCheckAPI(userid)
    .then((response) => {
      console.log(response)
      if(response === false){
        alert('사용 가능한 아이디입니다.');
        setUsableId(response);
      }
      else{
        alert('중복된 아이디입니다. 다시 시도하세요.');
        setUsableId(response);
        setUserid('');
      }
      console.log('중복체크');
    })
  }

[response = false] -> 아이디가 중복되지 않음

setUsableId(true) -> 아이디 사용 가능 (중복 ❌)

---

⌨️ 전체 코드

//SignUpPage.js
function SignUpPage({setToken}) {

  const [usableId, setUsableId] = useState(false);
  
  const duplicationCheck = () => {
      duplicationCheckAPI(userid)
      .then((response) => {
        console.log(response)
        if(response === false){
          alert('사용 가능한 아이디입니다.');
          setUsableId(response);
        }
        else{
          alert('중복된 아이디입니다. 다시 시도하세요.');
          setUsableId(response);
          setUserid('');
        }
        console.log('중복체크');
      })
    }
    
  //회원가입 버튼 클릭시
    const signUp = () => {
    
    if(password !== passwordToConfirm) {
      alert('비밀번호와 비밀번호 확인이 다릅니다.');
    }
    else if (userid === ''){
      alert('아이디는 필수항목입니다.');
    }
      
  	//...
      
    else if (setUsableId(false)){
      alert('아이디 중복 확인을 하십시오.');
    }
    
    else {
      signUpAPI(userid, password, username, email)
      .then((response) => {
        if (response !== '') {
          setToken(response);
          alert('회원가입 성공!!!');
          console.log(response.data);
          setUserid('');
          setPassword('');
          setPasswordToConfirm('');
          setUsername('');
          setEmail('');
          navigate('/room');
        }
        else {
          alert('회원가입 실패!!! - 원인으로는 서버 문제 or 아이디 중복 등의 원인이 있을 수 있습니다.');
        }
      });
    }
  }
  
  <div>
        <input
          name="userid"
          type="text"
          placeholder="아이디"
          value={userid}
          onChange={useridHandler}
        />
  </div>
  <div>
        <button className="duplicationCheckButton" onClick={duplicationCheck}>
          중복확인
        </button>
  </div>