[JS] 코드 내 외부 라이브러리 불러오기

웹 프로젝트에서 외부 라이브러리를 사용하기 위해서는 <script src="~~~"></script> 이런 식으로 불러오면 된다.

하지만 React 같은 경우에서 외부 라이브러리를 사용하려면 어떻게 할까?

npm이나 yarn과 같은 패키지 관리자를 통해 install 하는 방법이 있겠지만, API 형태로 제공하는 라이브러리를 사용하기엔 힘들었다.

또한 /public 폴더에 있는 index.html에서 불러오는 방법도 있지만 나는 이 방법이 깔끔하다고 생각하지 않았다.

찾아본 결과 JS 코드 내, 불러올 수 있었다.

코드

const script = document.createElement("script");
script.async = true;
script.src = [외부 라이브러리];
document.head.appendChild(script);

해당 코드를 함수화하여 React에서 useEffect 를 사용하여 불러와줬다.

문제점

도로명 주소 찾는 API는 저 코드로 정상적으로 작동을 했다. 하지만 Kakao MAP API는 작동하지 않았다. 추측하기로는 DOM이 로드될 때, 함께 동기적으로 라이브러리가 불러와져야하는데 useEffect 는 DOM이 로드된 후, 작동하기 때문에 그런 거 같다. 이럴 때 React Helmet 와 custom Hooks 를 통해 처리하는 방법이 있는데 추후 작성하려고한다.