리액트에서 동적으로 스크립트를 가져오는 약간의 해킹

외부의 js 스크립트를 동적으로 불러오는 방법을 누가 정리해놨네요.

해당 예시는 firebaseui-web-react용이지만 동적으로 호출해야하는 거의 모든 프로젝트에서 사용할 수 있을 것 같습니다.

예전에 구글 지도 스크립트를 동적으로 가져온다고 개고생했던걸 생각하면...따흐흑...

https://github.com/firebase/firebaseui-web-react/issues/21

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import firebaseui from 'firebaseui';
import useScript from 'react-use-scripts';
import { app } from '../my-firebase-app';
...

const firebaseUiConfig: firebaseui.auth.Config = {
  ...
};

export const SignIn = () => {
  const firebaseuiElement = useRef<HTMLDivElement | null>(null);
  const languageCode = 'es'; // get from somewhere

  const { ready } = useScript({
    src: `https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth__${languageCode}.js`,
  });

  useLayoutEffect(() => {
    if (ready && firebaseuiElement.current) {
      (window as any).firebase = firebase;
      const auth = firebase.auth(app);
      const firebaseuiUMD: typeof firebaseui = (window as any).firebaseui;
      const ui = new firebaseuiUMD.auth.AuthUI(auth);
      ui.start(firebaseuiElement.current, firebaseUiConfig);
    }
  }, [ready, firebaseUiConfig]);

  return (
    <div ref={firebaseuiElement} />
  );
}

참고자료

• https://github.com/firebase/firebaseui-web-react/issues/21