방법1
useEffect(() => {
const script = document.createElement('script');
script.text = 'const mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 12,
};
const mapDiv = document.getElementById("map");
const map = new naver.maps.Map(mapDiv, mapOptions);
console.log(map)';
document.body.appendChild(script);
}, []);
방법2
useEffect(() => {
const script = document.createElement('script');
const scriptText = document.createTextNode('
const mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 12,
};
const mapDiv = document.getElementById("map");
const map = new naver.maps.Map(mapDiv, mapOptions);
console.log(map)';
script.appendChild(scriptText);
document.body.appendChild(script);
}, []);
방법3
useEffect(() => {
const script = document.createElement('script');
script.innerHTML 'const mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 12,
};
const mapDiv = document.getElementById("map");
const map = new naver.maps.Map(mapDiv, mapOptions);
console.log(map)';
document.body.appendChild(script);
}, []);
위의 방법들은 리액트 React update dom이후에 실행되는 스크립트이다.
그전에 스크립트를 실행시키고자 하면 index.html에서 root태그이전에 실행시키거나
next.js의 경우 app.tsx나 document에서 dangerouslySetInnerHTML 속성을 이용할 수 있다.
방법4(next.js)
import NextDocument, { DocumentContext, Html, Head, Main, NextScript } from 'next/document';
...
render() {
return (
<Html>
<Head>
<script
type="text/javascript"
src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=otif9qklfk"
/>
</Head>
<body>
<script
dangerouslySetInnerHTML={{
__html: `
const mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 12,
};
const mapDiv = document.getElementById("map");
const map = new naver.maps.Map(mapDiv, mapOptions);
console.log(map)
`,
}}
/>
<Main />
<NextScript />
</body>
</Html>
);
}
