Ez egy AI által fordított bejegyzés.
React - a "kakao is not defined" hiba elhárítása
- Írás nyelve: Koreai
- •
-
Referencia ország: Minden ország
- •
- Informatika
0000-00-00 00:00:00
Válasszon nyelvet
A durumis AI által összefoglalt szöveg
- A React 18-ban a create-react-app környezetben a Kakao Térkép API integrálása során a térkép nem jelenik meg, ami a React komponensek globális objektumokhoz való közvetlen hozzáférésének hiányából adódik.
- A React a kapszulázás, a teljesítmény és az állapotkezelés érdekében nem engedi a globális objektumokhoz való közvetlen hozzáférést, ehelyett a Reduxhoz hasonló központi állapotkezelő könyvtárakat használ a data áramlásának szabályozására.
- A Vue-val ellentétben a React nagyobb szabadságot kínál a könyvtári struktúra és a hookok tekintetében, de a kezdő fejlesztők számára ez kihívást jelenthet. A toy projektek révén lehet a legjobban megismerkedni a framework-kel.
- Probléma
- Megoldás
- Ok
- Gondolatok
Probléma
A React 18, create-react-app környezetben a Kakao Térkép API integrálása során a térkép nem jelenik meg!
A head címke belsejében helyeztem el a szkript címkét, így azt hittem, hogy a böngésző renderelése előtt betöltődik.
** Megírtam az html-t, de nem látszik !!**
~nagyjából a index.html head címkéjébe beillesztettem a Kakao térkép betöltéséhez szükséges kódot~
<!-- 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(() => {
// map betöltése A konzolban azonban csak kakao is not defined jelenik meg és semmi nem renderelődik.
Megoldás
Alap: A React komponensek nem férnek hozzá közvetlenül a globális objektumokhoz.
Megoldás 1-1
A komponensfüggvényen kívül deklaráljuk a kakao attribútumot a globális objektumból.
const { kakao } = window;
function Map() {
//...Megoldás 1-2
A térkép rendereléséhez szükséges függvényeket elkülönítjük egy egyéni horogként.
//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>
)
A húzási események, a kattintási események, a markerkezelés stb., általában a térképen szükséges funkciók
jobb, ha nem a komponensen belül valósítjuk meg, hanem
egy egyéni horogként elkülönítjük, ami javítja a felhasználhatóságot és az olvashatóságot.
Ok
Miért nem fér hozzá a React a globális objektumokhoz - meg kell értenünk a React koncepcióját.
1) Kapszulázás és modularitás
- A komponenseknek függetlennek és újrafelhasználhatónak kell lenniük. Ha túl sok komponens támaszkodik a globális objektumokra, elveszítjük a függetlenségünket, és a rendszer sokkal bonyolultabb lesz.
2) Teljesítmény és könnyű karbantartás
- A React újrarenderelődik, ha az állapot változik, a globális objektumok nem alkalmasak az állapotváltozások nyomon követésére.
3) Az állapotkezelés központosított
- Ha mégis meg kell osztanunk több változót, akkor a Redux-hoz hasonló központosított állapotkezelő könyvtárakat használunk.
Központ -> komponensek, az adatok áramlását irányítjuk, így elkerüljük a hibákat és megkönnyítjük a karbantartást.
* Kiszolgálóoldali renderelés
Manapság a SEO (keresőoptimalizálás) érdekében gyakran használják a kiszolgálóoldali renderelést, de a window objektum nem érhető el a kiszolgálóoldalon !!
Gondolatok
Ez egy első React projektem során felmerült hiba volt.
Több mint 2 éve dolgozom Vue-val, de a React projekt elindításakor
nagyon meglepődtem, hogy nem tudtam megjeleníteni a Kakao térképet...!!!
A Vue-hoz képest a mappastruktúra és a horgok kicsit szabadabbak, ami miatt inkább nehezebbnek tűnik.
Sokáig gondolkoztam azon, hogy mi a hatékony módja a megírásnak.
Tovább kell gyakorolnom a játékszerű projekteket, szó szerint.
* Ez az első blogom, a durumis nagyon egyedi és szórakoztató.
Készít 3 pontos összefoglalót is, ami a koreaiaknak tetszik ㅋㅋ
Nem lehetne külföldi fejlesztőkkel is találkozni?
A kódszerkesztőnek egy kis javításra lenne szüksége.
Szabadon lehet véleményt cserélni, bírálatokat fogadok!
Jó napot!
