[React Native] 마운트 된 이후에 axios 응답이 도착할 때!

 

 

페이지를 최초로 마운트할 때!

axios 요청을 보내고 받은 데이터(응답)를

컴포넌트에게 넘겨서 보여줘야 하는데

이자식이 너무 늦게 와... 늦게 와서

빈 컴포넌트가 뜨거나 오류가 날 때...

 

정말 이것 때문에 새벽 5시에 잔 거 실화ㅠㅠ?

덕분에 자바스크립트도 많이 배우고

(axios의 scope)

여러모로 지식은 늘었겠지만 

힘들었습니다...

 

일단 구글링하면 React 얘기만 산더미임

리액트에서는 조건부 렌더링이라는 걸 써서

내가 원하는 값이 잘 도착했을때! undefined가 아닐때!

렌더링을 해줄 수가 있는데 리액트 네이티브는 못 찾음..

 

그래서 헤매고 헤매다가 내가 찾은 방법을 적으려고 함

 

 

일단 문제파악부터!

js파일을 보면 axios 요청이 훨씬 먼저인데도 불구하고

얘는 요청 보내놓고 자바스크립트는 다음으로 넘어가기 때문에

axios 밖에 있는 console.log 함수들이 먼저 실행됐다

그리고 맨 마지막에 axios요청이 도착!

근데 그 때는 이미 마운트가 다 됐어요..

렌더링도 끝났고요ㅠㅠ

 

참고로 초반의(라고 쓰지만 며칠 고민해서 나온) axios 코드는 이렇슴다

const baseURL = "http://{비밀이얏}/api/plan/weekly/period/";
  useEffect(async () => {
    axios({
      method: "GET",
      url: `${baseURL}${ymdFormat(findMonday())}`,
    })
      .then((response) => {
        console.log("axios 요청 성공!");
        const weeklyData = response.data;
        console.log("-----------axios 안에서----------------");
        console.log(classifyWeekData(weeklyData));
        setWeeklySchedule(classifyWeekData(weeklyData)); // << useState() 쓴 거
        console.log(weeklySchedule);
        console.log("-----------axios 안에서----------------");
      })
      .catch((error) => {
        console.log(error.data);
      });
  }, []);

 

이렇게 하는데 오류가 뙇

알려주더라고!

(터미널창을 잘 봅시다)

 

async를 effect내에 함수로 써서 바로 불러보라길래

알려준 거 따라서 요리조리 재조립해보았다.

 

const baseURL = "http://{비밀이지}/api/plan/weekly/period/";
  useEffect(() => {
    async function fetchData() {
      const response = await axios.get(`${baseURL}${ymdFormat(findMonday())}`);
      return response.data;
    }
    setWeeklySchedule(fetchData());
  }, []);

 

근데 문제는 이렇게 하면 저기 response.data가

내가 원하는 데이터만 오는게 아니고

프로미스 형태로 반환 됨...

 

 

사실 저기 두번째 코드에서 .then을 넣어주고 싶었는데

그럼 오류가 나길래

대체 어떻게 해야하는 걸까 고민했는데

팀원이 도와줬다 ㅎㅎ

 

useEffect(() => {
    async function fetchData() {
      const response = await axios.get(`${baseURL}${ymdFormat(findMonday())}`);
      return response.data;
    }
    fetchData().then((res) => {
      setWeeklySchedule(res);
    });
  }, []);

 

이렇게!!!

fetchData()에 then과 catch를 넣어주면

set에 잘 들어가서 붙더라고!

 

찾아보니 set이 조금 느린 편이래

그래서 axios내에서도 바로 콘솔 찍으면 weeklySchedule은 비어있었는데

이렇게 하니까 잘 나오더라고!

axios 안에서도 밖에서도 잘 나오고 

마운트 되기 전에 붙고!!! 갹

 

fetchData()의 반환값을 그대로 붙여주면 안되고

그 반환값의 response를 다시 전달해줘야 하는 것 같았다.

 

 

무튼 이렇게 문제 해결 완료 ㅎㅎ

 

 

(사실 어떻게 왜 잘 됐는지는...

조금 더 알아봐야할 것 같다 여기서 끝내기엔 찜찜해!)