[React JS] 카카오맵 사용 시 맵이 이중으로 랜더링 되는 현상

ReactJS로 토이 프로젝트를 진행 중일 때,

지도 사용을 위해 카카오맵API를 사용했다.

하지만 페이지 새로고침이나, 페이지 재진입 혹은 그냥 페이지 진입을 해도 계속해서 div가 하나만 나와야하는데,

div가 2개 생성되서 지도 위에 지도가 생성이 됬다

CDN방식 대신 동적 스크립트도 사용해보고

도대체 어디서 문제가 되는걸까 2일넘게 삽질을 했다....

 

결국 찾은 범인은 React.StrictMode

애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구로, 개발모드일때 사용된다.

컴포넌트를 unmount 시켰다가 다시 한 번 remount 시키게 되면서 div가 2개 생기는 것으로 추정되었고

React.StrictMode를 제거하니 정상적으롤 원하는 지도 화면을 볼 수 있었다!

지도 구성하는 요소들이 2개씩 생김

React.StrictMode

 

카카오MapAPI를 개발하는동안에는 잠시 React.StrictMode를 사용하지 않는 것으로!

build시에는 자동으로 제거되서 문제되진 않는다