Google Maps API 로드하기

구글 지도 서비스를 개발하면서 @googlemaps/react-wrapper와 @googlemaps/js-api-loader 중 어떤 라이브러리를 선택할지 고민하였다. 각 라이브러리는 지도 객체 생성과 API 로딩 방식에서 차이가 있으며, 프로젝트 구조와 요구 사항에 따라 적합성이 달라진다. 여기서는 두 라이브러리를 사용하면서 겪은 고민과 그 해결책을 정리하고자 한다.

아래는 각 라이브러리를 사용했을 경우 초기 지도를 로드할 수 있는 기본적인 base 코드다.

@googlemaps/react-wrapper

https://www.npmjs.com/package/@googlemaps/react-wrapper

const render = (status: Status) => {
  switch (status) {
    case Status.LOADING:
      return <>로딩중...</>;
    case Status.FAILURE:
      return <>에러 발생</>;
    case Status.SUCCESS:
      return <GoogleMap />;
  }
};

function App() {

  return (
    <Wrapper apiKey="구글에서 받은 api key" render={render}/>
  )
}

리액트 컴포넌트로 wrapper를 지원하며, Wrapper의 childern들은 해당 구글 api에 접근할 수 있다.

@googlemaps/js-api-loader

https://www.npmjs.com/package/@googlemaps/js-api-loader

    const loader = new Loader({
      apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY || '',
      version: '3.58',
    });
    await loader.load();

먼저 api를 로드하고

위의 코드에서 보았듯이 두 라이브러리의 가장 큰 차이점은 리액트 환경과 api 로더를 연결했냐의 차이다.

@googlemaps/react-wrapper 는 리액트 컴포넌트로 감싸 load시점을 해당 컴포넌트 마운트 시점으로 통일 할 수 있는 반면, 항상 render함수를 props로 내려야 하고, 이때 로딩과 에러 처리를 대신 해주지만, 그만큼 구조적으로 강제성이 존재한다.

만약 googleMap 컴포넌트를 Suspense나 errorBoundary로 감쌀 경우 저 render함수에서 다시 Promise나 error를 throw해야한다.

@googlemaps/react-wrapper 특징

@googlemaps/react-wrapper 는 리액트 컴포넌트로 감싸 load시점을 해당 컴포넌트 마운트 시점으로 통일 할 수 있다.

하지만 항상 render 함수를 props로 내려야 하고, 이 때 로딩과 에러 처리를 대신 해주지만, 그만큼 구조적으로 강제성이 존재한다.

만약 googleMap 컴포넌트를 Suspense나 ErrorBoundary로 감쌀 경우 저 render함수에서 다시 Promise나 Error를 throw해야한다.