Promise 객체를 만들어 오류를 처리하자

커스텀 훅으로 경위도를 좌표값으로 변환하고, 변환한 좌표값을 통해 HTTP Request를 보내어 특정 data를 받아와야 하는 로직을 구현하고 있었는데, 문제는 async await으로 비동기를 처리하다보니, 커스텀훅을 통해 변환된 좌표값이 순서를 보장하지 못해 default value로 Http Request가 진행되는 경우가 있었다.

그래서 커스텀 훅의 실행을 Promise 객체로 만들고, 그 이후 then 메서드를 통해 프로미스의 결과값으로 Http Request를 보내는 로직을 구현하였다.

  const submitHandler = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const searchValue = keywordValue;
    setGeoSearchValue(searchValue);
    setKeywordValue('');
    setPlaceMarkers([]);
    setWeatherResult([]);
    setMinMaxTemp([]);

    geo.current.addressSearch(searchValue, (result: any, status: any) => {
      if (status === window.kakao.maps.services.Status.OK) {
        console.log(result);
        setGeoResult({
          x: Number(result[0].x),
          y: Number(result[0].y),
        });
        // custom Promise
        new Promise((resolve, reject) => {
          resolve(calcLatLng(Number(result[0].x), Number(result[0].y)));
        }).then((resolve: any) => {
          // custom hook의 결과를 resolve로 받아 http request에 입력
          axios.get( `api/&pageNo=1&base_date=${today}&base_time=${nowNoticeTime}00&nx=${resolve.x}&ny=${resolve.y}&dataType=json`)
            .then((response) => {
              const result: ResponseDataTypes[] =
                response.data.response.body.items.item;

              let detailWeatherArray: ResponseDataTypes[] = [];
              let maxMinWeatherArray: ResponseDataTypes[] = [];
              result.map((item) => {
                if (
                  item.category === 'POP' ||
                  item.category === 'REH' ||
                  item.category === 'PCP' ||
                  item.category === 'POP' ||
                  item.category === 'SKY' ||
                  item.category === 'PTY'
                ) {
                  detailWeatherArray.push(item);
                }
                if (item.category === 'TMN' || item.category === 'TMX') {
                  setMinMaxTemp((prev) => [...prev, item]);
                }
              });

              for (let i = 0; i < placeMarkers.length; i++) {
                placeMarkers[i].setMap(null);
              }
              ps.current.keywordSearch(
                searchValue,
                (data: any, status: any, pagination: any) => {
                  if (status === window.kakao.maps.services.Status.OK) {
                    let bounds = new window.kakao.maps.LatLngBounds();
                    for (let i = 0; i < data.length; i++) {
                      displayMarker(data[i]);
                      bounds.extend(
                        new window.kakao.maps.LatLng(data[i].y, data[i].x)
                      );
                    }
                    map.current.setBounds(bounds);
                  }
                }
              );
            });
        });
      }
    });
  };