React useEffect 내에서 axios 및 함수 실행 관련 질문입니다.

Question

리액트 및 스프링부트를 활용하여 학습 중입니다.useEffect를 사용하여 특정 페이지에 진입하자 마자 getToken API를 호출하고자 합니다.axios.post 활용해서 뒷단(8080포트)으로 보내주어 성공했는데요.궁금한 점이, useEffect 내에서 바로 axios.post를 사용하면 성공하는데, getTokenFun(); 이런 식으로 별도의 함수로 뺐을 때는 실패하여 catch 문으로 빠집니다.이유가 무엇일까요?? useEffect 문 안에서 axios를 바로 실행하는 것과 함수로 별도로 빼어 useEffect 내에 해당 함수를 실행하는 것의차이가 무엇인가요??const AuthSuccess = ()=>{ ... ... useEffect(()=>{ let data = { "code": query, "client_id": "abcd1234", "client_pw": "a123456", }; axios.post("http://localhost:8080/api/v1/token/getToken", data). then((res)=>{ setAccessToken(res.data.access_token); sessionStorage.setItem("access_token", accessToken); }). catch((res)=>{console.log('token API fail...', res)}); //getToken(); //이렇게 함수로 별도로 뺏을 때 axios fail 되어 catch문으로 빠짐. 위 처럼 바로 axios.post로 보내면 success되어 then으로 간다. }, []) //별도로 뺐던 함수. const getToken = () =>{ let data = { "code": query, "client_id": "abcd1234", "client_pw": "a123456", }; axios.post("http://localhost:8080/api/v1/token/getToken", data). then((res)=>{ setAccessToken(res.data.access_token); sessionStorage.setItem("access_token", accessToken); }). } return ( <> ) } export default AuthSuccess;

js_ · Answer

에러를 알려주세요

React useEffect 내에서 axios 및 함수 실행 관련 질문입니다.

1개의 답변

Q&A 목록