React - kakao が定義されていませんどうすれば解決できますか

React 18、create-react-app環境でカカオマップAPIを連携中に、地図がレンダリングされませんでした！

headタグ内にスクリプトタグを挿入したので、ブラウザがレンダリングされる前にロードされると考えていました。

**htmlを作成したのに表示されませんね！！**

～index.htmlのheadタグ内にカカオマップを読み込むコード～

しかし、コンソールにはkakao is not definedとしか記録されない何もレンダリングされませんでした。

解決策1-1

コンポーネント関数外でグローバルオブジェクトからkakaoプロパティを取り出して宣言します。

解決策1-2

カカオマップをレンダリングする際に必要な関数を、別のカスタムフックで作成します。

ドラッグイベント、クリックイベント、マーカー処理など、一般的に地図に必要な機能は

コンポーネント内に実装するよりも、

カスタムフックに分離する方が、再利用性や可読性の面で優れています。

Reactでグローバルオブジェクトにアクセスしない理由 - Reactのコンセプトについて理解する必要があります。

1) カプセル化とモジュール性

- 各コンポーネントは独立していて、再利用可能である必要があります。多くのコンポーネントでグローバルオブジェクトに依存すると、独立性を失い、非常に複雑になります。

2) パフォーマンスと容易な保守

- Reactは状態が変化すると再レンダリングしますが、グローバルオブジェクトは状態の変化を追跡するのに適していません。

3) 状態管理は中央で

- それでも複数の変数を共有する必要がある場合は、Reduxなどの中央状態管理ライブラリを使用します。

中央 -> コンポーネントへのデータフローを制御することで、エラーを回避し、保守を容易にします。

* サーバーサイドレンダリング

最近では、SEO（検索エンジンの表示最適化）のためにサーバーサイドレンダリングが広く使用されていますが、windowオブジェクトはサーバーサイドではアクセスできません！！

初めてのReactプロジェクトで経験した試行錯誤です。

Vueで2年以上実務を行ってきましたが、Reactプロジェクトを開始して

カカオマップを表示できず、かなり戸惑いました...！！！

Vueと比べると、フォルダ構造やフックなど少し自由な感じがして、かえって難しいです。

どのように記述するのが効率的か、多くのことを考えさせられます。

トイプロジェクト、文字通りおもちゃのように扱いながら、もう少し習得しなければいけません。

* ブログは初めてですが、ドゥルミス(durumis)は非常にユニークで面白いです。

日本人が好きな3行要約もしてくれるしねㅋㅋ

海外の開発者の方々とも出会えるのではないでしょうか？

コードエディタはもう少し改善されると良いですね

意見交換、ご指摘歓迎です～！

幸せな一日をお過ごしください！