useKakaoLoader hook을 사용하면 렌더링 되지 않습니다.

[Dave352]

먼저 감사의 말씀을 드립니다. react-kakao-maps-sdk 만들어주셔서 잘 사용하고 있습니다. 감사합니다.

CodeSandBox로 안내해드리고 싶었으나 저도 위와 같은 문제가 발생합니다. #57 실제 레포에서 사용할 때는 위와 같은 문제는 발생하지 않습니다. .

---

사용한 모듈 버전

• 번들러: vite
• react-kakao-maps-sdk : v0.1.14. => v0.1.16
• kakao.maps.d.ts : v0.1.38

---

현상

useInjectKakaoMapApi를 useKakaoLoader로 수정하면 렌더링이 되지 않습니다. 버전을 v0.1.14로 다운그레이드 한 후에 useInjectKakaoMapApi를 사용하면 정상적으로 렌더링됩니다.

그리고 이건 제 느낌인데, 메모이제이션 버그 같습니다.

---

코드

import { Map, useKakaoLoader } from "react-kakao-maps-sdk";

function App() {
  const { loading, error } = useKakaoLoader({
    appkey: import.meta.env.VITE_KAKAO_MAPS_API_KEY,    // ~> 환경변수
  });

  if (error) {
    throw new Error("카카오 API Error");
  }

  if (loading) {
    return <div>kakao loading...</div>;
  }

  return (
    <div>
      <Map
        center={{
          lat: 33.450701,
          lng: 126.570667
        }}
        style={{
          width: "100%",
          height: "450px"
        }}
        level={3}
      />
    </div>
  );
}

export default App;

[JaeSeoKim]

Map 컴포넌트 내부에서 Loading 상태를 확인하는 로직에 버그가 있어서 해당 문제를 수정하면서, 추가적인 오류가 발생한 것 같습니다. 해당 문제점은 바로 해결 방법을 찾아서 곧 바로 배포될 예정입니다.

추가적으로 useKakaoLoader 를 사용하면 Map 내부에서 상태를 추적하고 있기 때문에 loading status를 활용하여 컨디션 렌더링을 하지 않아도 됩니다.

또한 이때 loading 상태이더라도, Map container는 렌더링을 하기 때문에 CLS를 방지할 수 있습니다.

[Dave352]

답변 감사합니다. Close 하겠습니다.

[JaeSeoKim]

npm v1.1.17 배포 완료 하였습니다.

[Dave352]

@JaeSeoKim 확인했습니다.

문제 없이 렌더링 잘 됩니다.

감사합니다!! 🤗

[JaeSeoKim]

@Dave352 CodeSandbox에서 예시를 만들려고 할 때 #57 와 같은 문제가 발생한다고 이야기 주셨는데, 혹시 v1.1.19-beta에서는 어떻게 동작하는지 알 수 있을까요?

[Dave352]

@JaeSeoKim

오... 1.1.19-beta 버전에서는 #57 과 같은 문제는 해결되었습니다. 그런데 여전히 맵을 그리진 못하네요.

[JaeSeoKim]

@Dave352 v1.1.19 버전 배포 하면서 해결하였습니다..!