카카오맵 렌더링 오류

지도/로컬 API에 대한 문의게시판입니다.

안녕하세요~

React에서 카카오맵을 사용하고 있는 개발자 입니다.

아래 그림과 같이 지도 타일이 일부만 렌더링 되는 문제에 반복해 봉착하고 있는데, 어느 부분에서 문제가 발생한 것인지 가늠이 되지 않아 문의를 드립니다.

현재는 컴포넌트 내에서 componentDidMount를 이용해 지도를 생성하고 있습니다.

58

https://devtalk.kakao.com/t/react-api/43110

위 질문을 보시고 작성한 코드인데도 저렇게 나오는거면 다른 문제일겁니다.
지도 영역 스타일(특히 width/height)값이 채 지정되기 전에 지도가 불려지면 저렇게 보입니다.
하지만 정확한 원인은 코드를 보지 않는 이상 알 수 없습니다.

1개의 좋아요

@doji.doo

감사합니다 두더지 님!!

“지도 영역 스타일(특히 width/height)값이 채 지정되기 전에 지도가 불려지면 저렇게 보입니다.”
=> 정확히 이 부분이 문제였던 것 같습니다.

제 경우 width와 height를 각각 100%로 표시했었는데,
퍼센티지의 경우 부모요소를 기준으로 높이, 너비가 설정되어 문제가 되었던 것 같습니다.

뷰포트 기준인 100vh, 100vh로 변경하였더니
해당 에러는 해결되었습니다.

도움 감사합니다.

1개의 좋아요