react, JS의 반복문에서 await, async가 동기적으로 작동하지 않을때

const promised = resultSearch.map(async (item) =>{
      const _quadKey = item.quadKey;
      const _longitude = item.center[0];
      const _latitude = item.center[1];

      console.log("_quadKey", _quadKey);
      console.log("_resultSearch", item);

      const _getResponse = await tileQueryApi(_longitude, _latitude);

      let _saveInfraPoint = 0;

      _getResponse.data.features.map(item => {
        const _maki = item.properties.maki;
        const _mode = item.properties.mode;
        const _stopType = item.properties.stop_type;
        _saveInfraPoint += getInfraPoint(_maki, _mode, _stopType);
      });

      return {
        quadKey: _quadKey ,
        data: _saveInfraPoint
      };
    });

    const awaitAllData = await Promise.all(promised);
    console.log("awaitAllData", awaitAllData);

    onScreen.current.infraData = awaitAllData.concat(onScreen.current.infraData);

해결한 방법은 위와 같았다.

 

map으로 도는 쿼리를 만든후에 Promise.all 처리를 해서 모든게 도는것을 기다리는 형태

 

참고는 여기서 했다.

[번역] 반복문안에서의 자바스크립트 async/await (tistory.com)