React에 Html 코드나 외부 Script 코드를 적용시킬때 검색하면 나오긴 하지만
은근 보다보면 짜증나고 까다롭습니다.
간단하게 설명하기위해 내가 나중에 보기위해 글을 남깁니다.
먼저 코드 (기반은 create-react-app 을 하자마자 생성되는 리액트 앱을 기준으로 합니다.)
src/App.js
import React, { useEffect } from 'react';
import ReactDOM from "react-dom";
export default function App() {
useEffect(() => {
const script = document.createElement("script");
script.innerHTML = `
function initTmap() {
var map = new Tmapv2.Map("TMapApp", {
center: new Tmapv2.LatLng(37.566481622437934,126.98502302169841),
width: "100%",
height: "100%",
zoom:15
});
}
initTmap();
`;
script.type = "text/javascript";
script.async = "async";
document.head.appendChild(script);
}, []);
return (
<div
id="TMapApp"
style={{
height: "100%",
width: "100%",
position: "fixed",
}}
/>
);
}Effect를 사용하셔도 되고, Effect 대신 componentDidMount()로 동적으로 불러오셔도 됩니다.
그리고 이 Tmap 메소드를 사용하기 위해서는 먼저 선언되어야 하는게 있겠죠?
public/index.html
<script src="https://apis.openapi.sk.com/tmap/jsv2?version=1&appKey=자신의 앱키"></script>index.html 파일 안 <head></head> 태그에 이 스크립트 코드를 넣어 이 페이지에서 Tmap API를 불러오도록 해줍니다.
그러면 끝입니다.
결론
React에서 외부 JS Script 태그의 API들을 호출하기 위해서는 동적으로 불러와야하며,
저런식으로 불러옵니다.
'모바일 > React' 카테고리의 다른 글
| 노마드와 함께하는 Hooks -3 (useEffect) (0) | 2020.04.29 |
|---|---|
| 노마드와 함께하는 Hooks -2 (0) | 2020.04.29 |
| 노마드와 함께하는 Hooks -1 (0) | 2020.04.28 |
| Electron + React ( empty project ) (0) | 2020.04.24 |
| React에 C++,C#등 Dll을 올리는 법 ( 번외. Electron 쿠키 ) (0) | 2020.04.23 |