주소 입력하여 주소 띄워주는데 한박자 느려요

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

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

리액트로 지도 api를 사용중입니다.
특정 주소를 서버에서 받아와서 클릭 시 해당 컴포넌트로 이동해서 주소에 맞는 위치를 보여주고 있습니다.
그런데 첫번째 클릭시 해당 주소에 맞는 위치가 정상적으로 뜨는데,
다음번 위치를 클릭하면 직전의 위치를 똑같이 보여줍니다. (새로고침하면 제대로된 위치를 보여줍니다.)
혹시 주소값이 서버에서 다르게 들어오나 했는데 콘솔로 찍어봐도 주소는 정상적으로 들어오는데
이상하게 직전의 주소값을 보여주더군요… 이유가 뭘까요…??

import { useEffect } from "react";
import styled from "styled-components";


const KakaoMap = ({ address, company }) => {
  const { kakao } = window;
  useEffect(() => {
    var mapContainer = document.getElementById("map"), // 지도를 표시할 div
      mapOption = {
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3, // 지도의 확대 레벨
      };

    // 지도를 생성합니다
    var map = new kakao.maps.Map(mapContainer, mapOption);

    // 주소-좌표 변환 객체를 생성합니다
    var geocoder = new kakao.maps.services.Geocoder();

    // 주소로 좌표를 검색합니다
    geocoder.addressSearch(`${address}`, function (result, status) {
      // 정상적으로 검색이 완료됐으면
      if (status === kakao.maps.services.Status.OK) {
        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new kakao.maps.Marker({
          map: map,
          position: coords,
        });

        // 인포윈도우로 장소에 대한 설명을 표시합니다
        // var infowindow = new kakao.maps.InfoWindow({
        //   content: `<div style="display:flex;width:100%;text-align:center;padding:6px 0;">${company}</div>`,
        // });
        // infowindow.open(map, marker);

        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
        map.setCenter(coords);
      }
    });
  }, []);

  return (
    <>
      <MapWrap>
        <div
          className="map"
          id="map"
          style={{ width: "580px", height: "520px" }}
        ></div>
      </MapWrap>
    </>
  );
};

export default KakaoMap;

const MapWrap = styled.div`
  display: flex;
  flex-direction: column;
  background-color: transparent;
  position: relative;
`;```
2

첨부 코드로는 정확한 상황을 알 수 없지만
address 를 감지하는 useEffect를 추가해서 해당 훅에서 받아온 address 값으로 주소 검색 API를 호출해주세요.

useEffect(() => {
    if(!map) {
        return;
    }
	
    //주소 검색 API 호출
}, [map, address]);
1개의 좋아요
3

아 그렇네요…!! 따로 추가하지 않아도 기존 useEffect의 디펜던시에 넣으면 되는걸 제가 아무것도 넣지 않았었군요… 감사합니다!!

1개의 좋아요