지도가 렌더링되지 않습니다

react로 작성중인데, 맵이 보여지질 않습니다. 구글링한 결과 아무래도
width height 문제같긴한데 대체 뭐가 문젠지 알수가없습니다.
다른분들이랑 똑같이 쓰는데 코드도 똑같은데 뭐가문젠지 알수없어요

간헐적으로 width를 100vh height를 100vh 이렇게 하면 지도가 반쯤 보이다가
새로고침을 하면 다시 없어집니다.

오류1
저렇게 반쯤 보이다가 새고 하면 다시 지도가 사라집니다.

오늘 하루종일 구글링 중인데 대체 뭐가문젠지 모르겠어요…

지도 그리는 컴포넌트 .js

import React, { useEffect } from ‘react’

const { kakao } = window;

const MapContainer = () => {

useEffect(() => {

    const container = document.getElementById('myMap');

   

let options = {

  center: new kakao.maps.LatLng(33.450701, 126.570667),

  level: 3

};

    let map = new kakao.maps.Map(container, options);

   

}, []);

return (

<div id='myMap' style={{

    width:500+'px',

    height:400+'px'

}}></div>

)

}

export default MapContainer

인덱스.html head 부분에 추가한 것

컴포넌트를 띄워주는 페이지부분

import React, { useEffect } from “react”;

import MapContainer from “…/components/MapContainer”;

const Home = () => {

return (

<div className="home">

  <h2>~~~</h2>

  <h4>~~~</h4>

  <MapContainer/>

</div>

);

};

export default Home;

제발 아시는 분들 알려주세요… 물어볼데가 여기밖에 없네요

첨부 코드를 실행하면 width: 500px, height: 400px 크기로 지도가 표시되고 100vh로 변경해도 지도가 정상 표시됩니다.

혹시 따로 사용하는 css 파일이 있나요?
개발자 도구로 지도 Element에 선언한 스타일 외 다른 스타일이 적용되고 있는지 확인이 필요해 보입니다.

그리고 지도 스타일이 동적으로 변하거나 모달 또는 탭에서 지도를 띄우는 중이라면
아래 답변도 참고해주세요.
https://devtalk.kakao.com/t/topic/122056/2?u=lea.ju

css가 문제라고 하셔서 뭐가문젤지 처음부터 코딩다시했는데 제가 백그라운드에 색깔을 넣어준것이 문제였어요 ㅠㅠ 그거 때문에 다 가려진거더라구요… 진짜 감사합니다 드디어 해결했어요 이 간단한걸…

1개의 좋아요