[리액트] axios 반환 값이 undefined일 때 해결법

장고 rest framework와 리액트를 이용하여 로그인 기능을 구현 중이다.

클라이언트에서 axios로 email과 password를 api 주소로 post하면 서버에서 회원 정보가 유효한지 아닌지 확인한다.

 

services/AuthService.js에 로그인 로직을 생성하고, pages/Login.jsx에서 로그인 폼 제출 시 AuthService에 로직이 실행된다.

 

- 문제점 (틀린 코드)

[Login.jsx 실행 화면]

[pages/Login.jsx]

 이메일 형식이 맞다면(else문), requestLogin을 실행하고 반환값을 출력한다.

[services/AuthService.js]

email과 password가 post에 성공하였다면, 사용자 정보를 출력하고 리턴한다.

 

[출력 결과]

하지만! 콘솔을 보면 AuthService에는 잘 뜨는 반면에 Login에는 전달이 안된 것을 볼 수 있다.

 

🤔 🤔 .. await 구문을 통해 정보를 받아온걸 콘솔을 통해 확인할 수 있다.

하지만 Login.jsx에서는 undefined로 뜨는게 의아했다.

 

 

console.log로 requestLogin(email,pw) 자체를 출력해보면, fulfilled가 뜨는 걸 보니 비동기 처리는 성공했다..

 

그럼 왜 undefined가 뜨는걸까???

 

- 해결방법

정말 간단한 이유였다... requestLogin 로직을 return을 하지 않아서 생긴 문제였다... 

export만 하면 될 거라는 생각에 return은 생각도 못하고 있었다 😞

return 기억하자..!

이걸로 반나절을 고민했는데 그래도 해결해서 정말 다행이다...

원래라면 Login.jsx에 requestLogin 함수를 같이 작성해서 이런 문제를 겪을 일이 없었다.

나처럼 고민하고 있을 분이 계실까 봐 그래도 글을 작성해본다...

 

- 참고 사이트

Axios get function returns a promise in React