React 외부 js불러와서 사용하기

내가 생각하기에는 다른 방법도 있을 것 같은데

아직 그 방법을 찾지 못했다.

 

일단 성공한 방법으로는,

 

index.html 에서 외부 스크립트를 불러오고

렌더링 되는 구역을 찾아서, 사용할 컴포넌트에 createElement('script')를 써줘서 head에 script 를 넣어버리는 것이었다.

 

loadScript를 써서 index.html 으로 페이지 최초 호출 시, 불러오지 않아도 되는데

js 에서 쓰이는 함수가 많거나, 나중에 유지보수를 위해서 index.html 에 추가하는 방법을 택했다.

 

export function test() = {
	const script = document.createElement("script");
    script.innerHTML = `console.log('test()');`;
    script.type = "text/javascript";
    document.head.appendChild(script);
}

test();

index.html 에는 평소 html에 src를 통해 javaScript를 넣어주면 된다.

javaScript에 test() 라는 함수가 있다고 가정하여 호출하면 되었다.

다른 방법을 찾는다면 추가로 기재할 예정

 

+ 추가내용

 

load-script 사용

https://www.npmjs.com/package/react-load-script

react-load-script

 

npm install react-load-script

명령어로 설치하여 사용가능하다.

 

const loadScript = require("load-script");

export testScript = () => {
	loadScript("url", option, callback);
}