📖 TIL - React에서 카카오맵 API로 지오코딩 구현하기

📌 문제 설명

오늘 React 프로젝트에서 카카오맵 API를 사용해 지도 기능을 구현해야 했다. 특히 좌표와 주소를 서로 변환하는 지오코딩 기능이 필요했는데, 처음 써보는 거라 이것저것 삽질을 많이 했다.

🤔 문제 접근

1. 일단 기본 지도부터 띄워보자
2. 지도에서 위치 선택하는 기능 만들기
3. 선택한 위치의 주소 정보 가져오기
4. 주소로 검색해서 위치 찾기

💡 해결 방법

지도 컴포넌트

React-Kakao-Maps-SDK 라이브러리를 사용했다. 이 라이브러리가 Map, MapMarker 같은 React 컴포넌트를 제공해서 지도를 쉽게 구현할 수 있었다.

지도를 클릭하면 그 위치에 마커를 표시하고, 해당 위치의 좌표를 상태로 저장하는 기본 기능부터 만들었다.

역지오코딩 (좌표 → 주소)

이 부분이 좀 헷갈렸다. React-Kakao-Maps-SDK는 지도 컴포넌트만 제공하고, 지오코딩 같은 서비스는 원래 카카오맵 API를 그대로 써야 했다.

useRef를 사용해서 지오코더 객체를 관리했다. 컴포넌트가 리렌더링돼도 객체가 유지되는 장점이 있었다.

// 이런 식으로 사용했음 (간략히)
const geocoder = useRef(null);

useEffect(() => {
  geocoder.current = new window.kakao.maps.services.Geocoder();
}, []);

// 좌표로 주소 가져오기
const getAddress = (lat, lng) => {
  geocoder.current.coord2Address(lng, lat, (result, status) => {
    if (status === window.kakao.maps.services.Status.OK) {
      // 여기서 주소 정보 처리
    }
  });
};

주소 검색 (주소 → 좌표)

검색창에 주소를 입력하면 지도에서 해당 위치를 찾아주는 기능도 구현했다. 역지오코딩과 비슷하게 카카오 API를 사용했다.

✨ 새롭게 배운 점

1. 카카오맵 API 구조

   • JavaScript API와 React 라이브러리를 함께 써야 한다는 점
   • 지도 표시와 지오코딩 서비스가 분리되어 있다는 점

2. useRef의 활용

   • 외부 라이브러리 객체를 React에서 관리할 때 useRef가 정말 유용함
   • 렌더링과 무관하게 참조를 유지할 수 있다는 장점

3. 비동기 콜백 처리

   • 카카오맵 API는 대부분 콜백 기반으로 동작함
   • Promise로 감싸서 async/await 스타일로 바꿔 쓸 수도 있음

🚀 이런 점이 효율적이에요

단계별로 접근한 게 도움이 많이 됐다. 한 번에 모든 기능을 구현하려고 했다면 더 헷갈렸을 것 같다. 기본 지도 표시 → 마커 추가 → 지오코딩 추가 순으로 진행했더니 디버깅도 쉬웠고 이해도 잘 됐다.

useRef를 써서 지오코더 객체를 관리한 것도 좋은 선택이었다. useState로 관리했다면 불필요한 리렌더링이 발생했을 것이다.

다음에는 이 기능을 리팩토링 하며, 커스텀 훅으로 분리해보면 재사용성이 더 높아질 것 같다.