React - kakao 未定義 如何解決

• 問題
• 解決
• 原因
• 感想
  
  
  

問題

在 React 18、create-react-app 環境中，與 Kakao 地圖 API 整合時，地圖沒有渲染！

由於已在 head 標籤內插入腳本標籤，因此我認為它會在瀏覽器渲染之前載入。

**寫了 html 卻看不到！！**

～大概是在 index.html 的 head 標籤中載入 Kakao 地圖的程式碼～

但是 console 僅記錄了kakao is not defined什麼也沒有渲染。

解決

基礎：React 的元件不會直接存取全域物件。

解決方案 1-1

在元件函式外部，從全域物件中提取 kakao 屬性並宣告。

解決方案 1-2

將渲染 Kakao 地圖時所需的函式寫成獨立的自訂 Hook。

拖曳事件、點擊事件、標記處理等地圖的一般必要功能

與在元件內實作相比，

從可重複使用性和可讀性的角度來看，將其分為自訂 Hook 更好。

原因

需要了解 React 不存取全域物件的原因 - 了解 React 的概念。

1) 封裝和模組化

- 每個元件都應該獨立且可重複使用。如果許多元件都依賴全域物件，則會失去獨立性，並變得非常複雜。

2) 效能和易於維護

- React 在狀態改變時會重新渲染，而全域物件不適合追蹤狀態變化。

3) 狀態管理集中化

- 即使如此，如果要共享多個變數，則使用 Redux 等集中狀態管理程式庫。

集中 -> 控制資料流到元件，以避免錯誤並簡化維護。

* 伺服器端渲染

最近，為了 SEO（搜尋引擎最佳化），伺服器端渲染被廣泛使用，但是 window 物件無法在伺服器端存取！！

感想

這是我在進行第一個 React 專案時遇到的錯誤。

我使用 Vue 做了兩年多的實務，但在開始 React 專案時

無法顯示 Kakao 地圖，我感到相當困惑...！！!

與 Vue 相比，React 的資料夾結構和 Hook 等感覺比較自由，反而更難。

我一直在思考如何有效地編寫程式碼。

我需要像玩玩具一樣，透過玩具專案來進一步學習。

* 這是我的第一篇部落格文章，我覺得 durumis（두루미스）非常獨特有趣。

它還會提供韓國人喜歡的 3 點摘要，哈哈。

我也可以遇到國外的開發者嗎？

我希望程式碼編輯器能有所改進。

歡迎意見交流和指教～！

祝您有美好的一天！