React/ts 카카오맵 오류

문의 시, 사용하시는 SDK 버전 정보와 디벨로퍼스 앱ID를 알려주세요.


안녕하세요,
vscode에서 react로 카카오맵을 불러 올려고 하는데 에러가 나서요

실행 스크립트에서 “timestamp” 다음 ‘:’ 이 표시를 인식 못하는데 왜 그런걸까요?

안녕하세요.

script 태그가 선언된 파일명과 코드 전체를 보여주시겠어요?

전체 코드입니다~
파일이름은 LocationPage.tsx 입니다.

React에서 스크립트를 동적으로 삽입 하시려면
해당 기능을 지원하는 react-helmet 과 같은 라이브러리를 이용 하셔야만 합니다.

또는 React에서 카카오 맵 사용을 위한 오픈 소스 사용 ex, react-kakao-maps-sdk


JSX/TSX 에서 { } 태그는 Javascript 표현식을 의미합니다.
따라서, 첨부 이미지와 같이 작성될 수 없습니다.
script 태그 내 해당 문법은 JSX가 해석하지 않고 그대로 html에 출력되도록 하려면, 아래와 같이 수정해야 합니다.

<script>{`
new daum.roughmap.Lander({ ....
`}</script>

또는

<script dangerouslySetInnerHTML={{ __html: "new daum.roug...." }} />

하지만, 이렇게 작성 하여도 script 태그를 첨부 이미지와 같이 작성하면 랜더링때 마다 스크립트가 새로 작성되어 호출되므로 기대한바와 같이 정상동작 할수 없습니다.
React 에서 동적으로 외부 스크립트를 사용하는 방식을 따르는게 좋을것 같습니다.

감사합니다!