카카오맵 지도가 조금만 뜨는 현상에 대해서 문의가 있습니다

지도/로컬 API
#1

안녕하세요.

이 지도가 조금만 뜨는 현상은 계속 발생하는 것이아니라 10번중 1~2번정도 발생합니다.
이 현상에대해 포럼에있는 여러 글들을 보며 해결해보려하고 있습니다.
현재 React를 사용하고 있으며, CSS는 구글의 Merterial-UI 모듈을 사용하고 있습니다.
순차적으로 로드하기위해 React의 HOC방식으로 map을 로드하고 있습니다.

현재 지금 사용하고 있는 구성은

  1. sdk를 다운받고 - 완료되면
  2. kakao.maps.load 콜백으로 window kakao 객체를 전달해 준 후에
  3. 클라우드에서 데이터를 받아 컴포넌트에서 좌표를 넣어준 후 로드하고 있습니다.

지도가 조금만 뜨는 현상은 포럼을 통해 알아봤을 때

  1. 맵을 이동하거나 style변경으로 (display:none) 다시그리는 경우 - 함수map.relayout()을 사용하거나,
  2. CSS가 제대로 적용되지 않은 부분을 해결하거나,
  3. CSS가 뒤늦게 적용되었을 때
    제가 알아본 바로는 위의 경우가 있는 것 같습니다. 제 추측에 제 경우는 3번 처럼 로드되는 것 같습니다. CSS(width, height)가 맵이 로드된 후에 주입되어 카카오맵이 타일을 하나밖에 필요없다고 생각하여 하나만 주는 것 같습니다.

문제를 제대로 해결하기 위해서 두가지 방식이 있을 것 같은데

  1. timeout에 map.relayout() 를 주는방법과
  2. css를 불러온 후에 맵을 로드하는 방법이 있을 것 같습니다.

1번으로 하면 해결하기 쉽지만, timeout을 걸었을 때 깔끔하게 해결되지 않은 느낌이 듭니다.
위 2번 이라고 생각했지만, 또 적으면서 생각해보니 모듈을 적용하지 않고, 태그에 바로 적용해 보았는데 동일 한 오류가 나는걸 보니 CSS 때문은 또 아닌것 같습니다. 아니면 제가 놓치고 있는 부분이 있는 것인지…

혹시 좋은 방법이 있으시거나, 조언해주실 사항이 있다면 감사하겠습니다

#2

react는 필요에 따라 동적으로 view가 갱신되기 때문에
지도를 정상적으로 노출시키기 위해서는 DOM 렌더링이 끝난 시점에 지도의 로딩 => 선언 및 초기화 가 되어야 합니다.
보통 componentDidMount 훅에서 지도 객체를 만드는 것이 좋습니다.

만약 이 시점에서도 같은 현상이 발견된다면,
자기 자신 혹은 다른 컴포넌트의 비동기 결과에 의한 속성/상태 변경이 영향을 주고 있을 가능성을 체크해 봐야 합니다
보통 지도가 정상적으로 그려진 이 후에 레이아웃이 다시 정해지기 때문에 일부 타일을 그리지 못하게 되는데
이 시점을 알지 못하니 map.relayout()을 호출할 타이밍을 잡을 수 없는 상황이 됩니다.
그렇다면 setTimeout() 밖에는 답이 없는 상황이 되는거죠.

위 상황의 해법에 대해서 저희가 추가로 말씀드릴 수 있는게 없습니다.
컴포넌트의 계층구조와 props의 바인딩 여부, 비동기 로직과 같은 react 전체적인 로직 확인이 선행되어야 하기 때문입니다.

1개의 좋아요
#3

먼저 답변 감사드립니다.
지도 로딩은 말씀하신대로 현재 componentDidMount 훅에서 불러오고 있습니다.
다른 컴포넌트가 영향을 주고있는지 단위테스트를 해봐야 할 것 같습니다. 감사드립니다.

1개의 좋아요