Api를 통해 받아온 주소 데이터들과 현재 위치를 마커로 찍는 과정 오류

카카오맵 API (지도/로컬)
1

import React, { useEffect, useState } from ‘react’;
import axios from ‘axios’;
import { Map, MapMarker } from ‘react-kakao-maps-sdk’;

const { kakao } = window;

function Kakao() {

const [state, setState] = useState({
center: {
lat: 33.450701,
lng: 126.570667,
},
errMsg: null,
isLoading: true,
});

useEffect(() => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
setState((prev) => ({
…prev,
center: {
lat: position.coords.latitude,
lng: position.coords.longitude,
},
isLoading: false,
}));
},
(err) => {
setState((prev) => ({
…prev,
errMsg: err.message,
isLoading: false,
}));
}
);
} else {
setState((prev) => ({
…prev,
errMsg: ‘geolocation을 사용할 수 없어요…’,
isLoading: false,
}));
}
}, []);

useEffect(() => {
// 지도 초기화 및 마커 표시하는 함수
const initializeMap = async () => {
try {
const response = await axios.get(‘/hospital’);
const addresses = response.data.data;
const parsedAddresses = addresses.map((item) => item.ADRES);

    // 카카오맵 API 초기화
    window.kakao.maps.load(() => {
      const container = document.getElementById('map'); // 지도를 표시할 DOM 엘리먼트
      const options = {
        center: new window.kakao.maps.LatLng(state.center.lat, state.center.lng), // 지도 중심 좌표 (현위치)
        level: 8, // 지도 확대 레벨
      };
      const map = new window.kakao.maps.Map(container, options);

      // 주소 데이터를 이용하여 장소 표시
      const geocoder = new window.kakao.maps.services.Geocoder();
      parsedAddresses.forEach(async (address) => {
        try {
          const result = await geocoder.addressSearch(address);
          if (result && result.length > 0) {
            const position = new window.kakao.maps.LatLng(result[0].y, result[0].x);
            const marker = new window.kakao.maps.Marker({
              position,
            });
            marker.setMap(map);
          }
        } catch (error) {
          console.log(error);
        }
      });
    });
  } catch (error) {
    console.log(error);
  }
};

// Map 컴포넌트가 렌더링된 이후에 Kakao Map API 초기화 함수 호출
initializeMap();

}, [state.center]);

return (
<>
<Map // 지도를 표시할 Container
center={state.center}
style={{
// 지도의 크기
width: ‘100%’,
height: ‘800px’,
}}
level={3} // 지도의 확대 레벨
>
{!state.isLoading && (

<div style={{ padding: ‘5px’, color: ‘#000’ }}>
{state.errMsg ? state.errMsg : ‘여기에 계신가요?!’}


)}

</>
);
}

export default Kakao;

현재 코드 입니다. 현재 위치는 마커가 잘 생성되지만 TypeError: Cannot read properties of null (reading ‘currentStyle’) 에러와 주소 데이터들을 마커로 나타내지 못하는 상황입니다. 혹시 해결방법이 있는지 궁금합니다!

3

안녕하세요.

코드를 다시 봐보니;;

현재 geocoder의 경우에는 Promise를 사용하지 않기 때문에, async/await 문법을 사용하면; 아무런 결과도 나오지 않습니다.
무조건 콜백함수 인자가 필요합니다.

별도로 Promise를 리턴하게 작업을 하셔서 이용하시면 모를까, API그대로 사용하면 아무런 값도 나오지 않는 점 참고 바랍니다.
검색결과에 대한 값이 나오지 않는건 이 이유이지 않을까 합니다.