React - kakao nincs definiálva, hogyan lehet megoldani?

• Probléma
• Megoldás
• Ok
• Vélemény
  
  
  

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 renderelődött!

A head tagbe beillesztettem a script tageket, így azt gondoltam, hogy a böngésző renderelése előtt betöltődik.

**Megírtam a html kódot, de nem jelenik meg!!**

~nagyjából ez a kód, amivel a Kakao Térképet betöltöttem az index.html head tagjébe~

A konzolon azonban csak a kakao is not defined üzenet jelent megés semmi sem renderelődött.

Megoldás

Alapok: A React komponensek nem férnek hozzá közvetlenül a globális objektumokhoz.

Megoldás 1-1

A komponens függvényen kívül deklaráljuk a globális objektumból a kakao tulajdonságot.

Megoldás 1-2

A térkép rendereléséhez szükséges függvényeket külön egyéni hookban (custom hook) írjuk meg.

A húzási események, kattintási események, jelölők kezelése és egyéb általános térképes funkciók

a komponensen belüli implementálás helyett

egyéni hookba való szétválasztása jobb megoldás a felhasználhatóság és az olvashatóság szempontjából.

Ok

Meg kell érteni a React koncepcióját, hogy miért nem férnek hozzá a React komponensek a globális objektumokhoz.

1) Kapszulázás és modularitás

- A komponenseknek függetleneknek és újrafelhasználhatóaknak kell lenniük. Ha számos komponens függ a globális objektumoktól, akkor elveszítik a függetlenségüket, és a rendszer nagyon bonyolulttá válik.

2) Teljesítmény és egyszerű karbantarthatóság

- A React a state változásakor újra renderel. A globális objektumok nem alkalmasak a state változások nyomon követésére.

3) State kezelés központilag

- Ha mégis meg kell osztani több változót, akkor a Redux-hoz hasonló központi állapotkezelő könyvtárakat használunk.

Központ -> komponensek adatfolyam irányítása hibák elkerülése és egyszerű karbantartás.

* Szerveroldali renderelés

Manapság az SEO (keresőoptimalizálás) miatt egyre gyakrabban használják a szerveroldali renderelést, de a window objektumhoz nem férünk hozzá a szerveroldalon!!

Vélemény

Az első React projektem során tapasztalt hibákról van szó.

Több mint 2 éve Vue-val dolgozom a fejlesztésben, de a React projekt elindítása után

nagyon megijedtem, hogy nem tudom megjeleníteni a Kakao Térképet...!!!

A Vue-hoz képest a mappastruktúra és a hookok kissé szabadabbnak tűnnek, ami miatt nehezebbnek érzem.

Sokáig gondolkodtam azon, hogy mi a hatékony megoldás.

Játékként kell kezelnem ezt a kis projektet, és még többet kell tanulnom róla.

* Ez az első blogom, és a durumis (ドゥルミス) nagyon egyedi és szórakoztató.

A koreaiak által kedvelt 3 pontos összefoglalót is készít.

Talán külföldi fejlesztőkkel is találkozhatok itt?

A kódszerkesztő kissé fejleszthető lenne.

Örömmel várom a véleményeket és a kritikákat!

Szép napot!