Reactで<script>タグを動的にロードする方法

Reactで<script>タグを動的に生成してスクリプトを実行したいことは頻繁にあると思うのでメモ

やり方

下の<script>をReactで動的にロードしたいとします。

<script
    type="text/javascript"
    src="src"
    data-client-key="key"
></script>

React で外部スクリプトを読み込むにはuseEffectを使ってロードします。

useEffect(() => {
    const head = document.getElementsByTagName('head')[0] as HTMLElement;
    const scriptUrl = document.createElement('script');
    scriptUrl.type = 'text/javascript';
    scriptUrl.src = 'src';
    scriptUrl.setAttribute("data-client-key", key);
    head.appendChild(scriptUrl);
}, []);

scriptオブジェクトに無いkeyなどはsetAttributeを使って追加することができます。