1. 글쓰는 이유

카카오맵, 말 그대로 지도이다. 원하는 위치를 주소 및 키워드를 활용하여 찾을 수 있도록 도와준다.

개발자들 또한 지도를 활용하여 기능을 구현하려고 할 때, kakao map api를 많이 활용한다.

kakao map api를 활용하는 분들이라면 kakao 개발 사이트에서 제공하는 sample들을 보면 원하고자 하는 부분을 많이 구현할 수 있다.

그럼에도 불구하고 내가 카카오맵에 대한 글을 올리는 이유는

바로 '팝업창' 이다.

그동안 api를 통해서 카카오맵을 몇 번 구현해보았지만, 팝업창을 띄어서 그 안에 구현하는 작업은 해보지 못했다.

구글링을 하면서 방법을 찾아보았지만, 쉽사리 찾을 수 없음에
나와 같은 고민을 하는 개발자가 있다면
이 글을 읽고 한 줄기 희망이 되었으면 한다.

2. 본론으로

나는 React를 사용하는 개발자이므로 카카오맵 팝업창에 관한 이 이야기도 React로 구현하였다.

일단은 코드를 보고 이에 대한 설명을 하겠다.

// 팝업창(지도를 담은)이 켜지고 닫힘을 표시함
const [open, setOpen] = useState(false);

// 팝업창을 열었을 때, 처음으로 보이는 위치
let latitude = 37.5233511349545;
let longitude = 127.037425209409;


useEffect(() => {
    const mapScript = document.createElement("script");

    mapScript.async = true;
    mapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=*********&libraries=services&autoload=false`;

    document.head.appendChild(mapScript);

    const onLoadKakaoMap = () => {
    window.kakao.maps.load(() => {
        const container = document.getElementById("map");
        const options = {
        center: new window.kakao.maps.LatLng(latitude, longitude),
        };
        const map = new window.kakao.maps.Map(container, options);
        const markerPosition = new window.kakao.maps.LatLng(
        latitude,
        longitude
        );
       
    });
    };
    if (open === true) {
    mapScript.addEventListener("load", onLoadKakaoMap);
    } else if (open === false) {
    return mapScript.removeEventListener("load", onLoadKakaoMap);
    }
}, [open]);

위 코드에서 보아야 할 코드는

1) const [open, setOpen] = useState(false);

2) if (open === true) {
mapScript.addEventListener("load", onLoadKakaoMap);
} else if (open === false) {
return mapScript.removeEventListener("load", onLoadKakaoMap);
}

이 부분들이다.

해당 코드는 useEffect에 Dependency를 비워두어 팝업창을 키자마자 실행되는 부분이다.

open state가 true일 때, 팝업창이 열려있고,
open state가 false일 때, 팝업창은 닫혀있다.

또한, open state가 변하면서 2)의 코드 또한 실행이 된다.
open state가 true일 때,

mapScript.addEventListener가 동작하면서 onLoadKakaoMap가 실행된다.

그리고,
open state가 false일 때,

mapScript.removeEventListener 동작한다.

여기서 핵심인 부분은 addEventListener과 removeEventListener 이다.

addEventListener는 docuent이 특정요소 예를 들어 Id, class, tag 등에 event 즉, click이나 hover로 함수를 실행하는 것을 등록할 때 사용한다.

반면 removeEventListener는 추가된 이벤트를 제거한다.

난 이 부분을 늦게 찾아서 고생했다.

나의 경우 addEventListener는 좀 더 빨리 찾았지만, removeEventListener는 알지 못하였다.

처음에 addEventListener만 사용하다보니 팝업창을 열 때는 문제가 없었지만,
팝업창을 닫을 때, 오류가 계속 발생되었다. addEventListener를 활용하여 지도는 load하였고,
지도에 대한 다른 명령없이 팝업창을 닫으려고 하니 오류가
날 수 밖에 없던 것이다.

즉, 지도는 load된 상태로 유지되어 있는데, 나는 예고 없이 닫으려고만 하니 문제가 되는 것이다.

비유 하자면, 생각하는 머리와, 동작하는 몸이 따로 노는 것이다.

3. 글을 마치며

산 하나를 넘었다고 생각한다.
개발자가 되기 위해선, 이러한 일들 또는 이러한 일보다 몇 배는 어려운 작업이 찾아올 것이다.

걱정도 되지만, 설렘도 다가온다. 나는 어려운 문제를 푸는 걸 좋아한다. 그리고 이 경험을 다른 이들에게 공유하는 것도 좋아한다.

앞으로 블로그에 글을 남기는 일이 많아졌으면 좋겠다.
개발자는 생각하는 사람이다.