这是AI翻译的帖子。
选择语言
durumis AI 总结的文章
- 在 React 18 中，使用 create-react-app 環境與 Kakao 地圖 API 整合時，地圖無法渲染，這是因為 React 元件不直接存取全域物件。
- React 為了封裝、效能、狀態管理等原因，不直接存取全域物件，並使用 Redux 等中央狀態管理程式庫來控制數據流。
- 與 Vue 不同，React 在文件結構和 Hook 等方面給人一種自由的感覺，但對於初學者來說，反而可能會感到困難，建議透過玩具專案來熟悉。
- 問題
- 解決
- 原因
- 感想
問題
在 React 18, create-react-app 環境下，在連接 Kakao 地圖 API 的過程中，地圖沒有渲染！
我在 head 標籤中插入了腳本標籤，因此我認為瀏覽器會在渲染之前載入它。
**我寫了 html 代碼，但它沒有顯示出來！**
~大致上 index.html 的 head 標籤中載入 Kakao 地圖的代碼~
<!-- index.html -->
<head>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_API_KEY%&libraries=services,clusterer,drawing" id="map-lib"></script>useEffect(() => {
// 載入地圖 然而，在 console 中，只記錄了 kakao is not defined，沒有渲染任何東西。
解決
基礎：React 的組件不會直接訪問全局對象。
解決方案 1-1
在組件函數之外從全局對象中提取 kakao 屬性並聲明它。
const { kakao } = window;
function Map() {
//...解決方案 1-2
將渲染 Kakao 地圖所需的函數寫入單獨的自定義鉤子中。
//hooks/useKakaoMap.js
const { kakao } = window;
function useKakaoMap() {
const initializeMap = useCallback(() => {
const container = document.getElementById('map');
const options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
const newMap = new kakao.maps.Map(container, options);
setMap(newMap);
}, []);
//...
return {
initializeMap
}
}
export default useKakaoMap;
//Map.js
function Map() {
const {
initializeMap,
} = useKakaoMap();
useEffect(() => {
initializeMap();
}, [initializeMap]);
return(
<div id="map"></div>
)
拖放事件、點擊事件、標記處理等一般的地圖必要功能，
與在組件中實現相比，
將其分為自定義鉤子在可重用性和可讀性方面更好。
原因
React 為什麼不訪問全局對象 - 需要了解 React 的概念。
1) 封裝和模組性
- 每個組件都應該是獨立的，並且可以重複使用。如果在無數個組件中依賴全局對象，就會失去獨立性，並且會變得非常複雜。
2) 性能和易於維護
- React 會在狀態發生變化時重新渲染，而全局對象不適合跟踪狀態變化。
3) 狀態管理集中於中心
- 但是，如果需要共享多個變數，請使用 Redux 等中央狀態管理庫。
集中-> 控制從中心到組件的數據流，以避免錯誤並使維護更容易。
* 服務器端渲染
最近，為了 SEO（搜索引擎優化），服務器端渲染被廣泛使用，但無法從服務器端訪問 window 對象！
感想
這是我在第一個 React 項目中遇到的試錯。
我用 Vue 做了兩年多的實務工作，但在開始 React 項目時，
我對無法顯示 Kakao 地圖感到非常困惑...！
與 Vue 相比，感覺文件結構和鉤子等比較自由，反而更難。
我一直在想如何有效地編寫它。
我應該像玩具項目一樣，多玩玩它，以便更好地理解它。
* 這是我的第一個博客，我覺得 두루미스 很特別也很有趣。
它還會做韓國人喜歡的 3 行總結 ㅋㅋ
我也可以遇到國外的開發者嗎？
我希望代碼編輯器能改進一下
歡迎交流意見和指正！
祝您度過愉快的一天！
