[JavaScript, React Native, React] {"_U": 0, "_V": 0, "_W": null, "_X": null} 출력

 

1. 문제발생

Util에서 API를 호출한뒤 받아온 데이터를 Return 해주는 모듈을 만들고 있었다.

API 호출까지는 잘되는데 본 컴포넌트에서 return 되는 데이터가 좀 이상했다.

이게 뭔...

이게 뭔가 싶어 찾아봤다.

 

2. 원인 분석

먼저 작성된 코드는 이러했다.

//util.js
export const getBanner = async () => {
    const res = await API.post('/...api url',{
        ...
    })

    const api = JSON.parse(res.data.data);


    if(api.result === 'true' && api.data.length > 0){
        return {
            result : true,
            bannerInfo : api.data[0],
        }
    }
    else{
        return {
            result : false,
            bannerInfo : null
        };
    }
}

//component
import { getBanner } from '../../util/util';
...
useEffect(()=>{
    const bannerInfo = getBanner('102');

    console.log(bannerInfo)

 },[])
 ...
 //output -- {"_U": 0, "_V": 0, "_W": null, "_X": null}

이렇게 작성해뒀다.

api 데이터를 받아온뒤 result와 data가 존재할때 info를 return 시켜주고 그것이 아니라면 null을 반환시켜준다.

이미 export 하기전 비동기를 태웠기때문에 return 되는 데이터 또한 바로 넘겨질 줄 알았다!

하지만 그게 아니라...

API 데이터는 promise형태로 넘겨지는데 컴포넌트에서 받아올때 promise가 풀리기도 전에 호출당해서 해당 문구가 출력되는 것이다.
then을 사용하는 것도 고려해봤는데 지금은 프로젝트가 많이 바쁘다 보니 ㅜㅜ...

 

3.  해결방법

promise가 풀리고 호출해오면 되는 것!

useEffect(async ()=>{
    const bannerInfo = await getBanner('102');

    console.log(bannerInfo)
},[])

요로코롬 함수를 호출해올 때 비동기를 태워주면 된다.