🧑🏻‍💻 카카오맵 모듈화 삽질 일기

자취생들 레시피, 요리 영상을 추천해주는 서비스를 만들면서 레시피 상세 정보 부분에 레시피 재료를 살 수 있는 내 위치 주변 마트들을 가져와 지도상에 표시해주는 기능을 구현하고 있었다.

ex) 급하게 예시코드 만들기..!

모듈화 전 코드를 급하게 만들어 보았다. 여기에 지도 띄우는 코드, 마커찍는 코드, 위도/경도 값으로 주소 받고 주변 마트들 마커 찍는 코드 등이 하나의 컴포넌트에 들어가 있어서 가독성도 안좋고, 나중에 유지보수 또한 좋지 않을 것 같다는 생각이 들었다.
그래서 각각의 기능을 Custom-Hook으로 기능 별로 나누고, 훅을 가져와서 사용하는 방법을 생각을 했었다.

물론 훅으로 만들어서 사용할 수 있으면 좋았겠지만 화면을 보면 에러가 엄청 많이 뜨는 것을 볼 수 있었다. 에러 내용을 캡쳐를 못했다..!

🧐 기존 kakaomap api를 custom-hook으로 나눌 수 없었던 이유

먼저 React에서는 const { kakao } = window; 를 써서 kakao 객체에 접근할 수 있는데, 그 말은 즉, 화면이 렌더링 된 이후에 카카오맵과 관련된 로직에 접근해야 되는 상황이 발생한다. 때문에 위 코드처럼 강제로 하나의 컴포넌트에 useEffect 안에서 작성 가능하도록 만들게 된다.
(참고 : https://nukw0n-dev.tistory.com/31)

당장은 잘 동작하겠지만 기능이 추가될 수록 하나의 컴포넌트에 여로 동작을 하는 코드가 생기고, 코드가 너무 길어지는 문제가 생기게 된다.

다양한 방법을 찾아보던 중 애초에 react 방식으로 지원되는 kakaomap api가 존재한다는 것을 알게되었다. (이걸 못 찾아서 3일 동안 삽질을..)
https://react-kakao-maps-sdk.jaeseokim.dev/

먼저 아래처럼 install 해주고 sample 예제들을 보면서 적용하면 된다.

npm install react-kakao-maps-sdk

적용한 결과 아래 사진처럼 각 기능마다 hook으로 만들어서 모듈화를 시킬 수 있었다!

웹 페이지에도 정상적으로 잘 띄워지는 것을 볼 수 있다.