react API호출시 반환값이 이상할때

먼저 api 호출부를 보자.

export default async function loginApi(userId, userPwd){    
    const response = await axios.post(
        '/member/login',
        {
            userId : userId,
            userPwd : userPwd
        }
    ).catch((e) => {
        console.log(e);
        alert("로그인 실패");
    })

    return response.data;
}

간단하게 test하기위해 만든 login api 호출부이다. 여기서 내가 반환한 response 를 호출부에서 받아 사용하려고 했는데 문제가 undefined 값이 오는걸 확인했다.

이유는 간단하다. 함수내부에 axios를 await(동기) 처리해준다. 이렇게 하면
response에 결과값이 들어오는건 맞다.

하지만 함수 호출부에서 이녀석을 await로 호출해주지 않으면 reponse 값을 받기전에 비동기로 함수를 반환해버린다. 따라서 호출부에도 await를 사용해주면 된다.

해결 전

function handleLogin(userId, userPwd){
    var member = loginApi(userId, userPwd);
    console.log(member);
    if(member.status == "success"){
      setUser(member.Member.userId);
    }
  }

해결 후

async function handleLogin(userId, userPwd){
    var member = await loginApi(userId, userPwd);
    console.log(member);
    if(member.status == "success"){
      setUser(member.Member.userId);
    }
  }