React - kakao is not defined: hoe los ik dit op?

• Probleem
• Oplossing
• Reden
• Reflectie
  
  
  

Probleem

Tijdens het integreren van de Kakao Map API in een React 18 omgeving met create-react-app, werd de kaart niet gerenderd!

Ik had de scripttag in de head tag geplaatst, dus ik dacht dat deze vóór het renderen van de browser zou worden geladen.

**De HTML is geschreven, maar wordt niet weergegeven!!**

~Kort gezegd, de code om Kakao Map op te roepen in de head tag van index.html~

Maar in de consolewerd alleen "kakao is not defined" geregistreerden werd er niets gerenderd.

Oplossing

Basis: React-componenten hebben geen directe toegang tot globale objecten.

Oplossingsmethode 1-1

Declareer de kakao-eigenschap buiten de componentfunctie door deze uit het globale object te halen.

Oplossingsmethode 1-2

Maak de functies die nodig zijn om de Kakao Map te renderen in een afzonderlijke aangepaste hook.

Drag-events, klik-events en marker-handling, en andere functies die gewoonlijk nodig zijn voor de kaart,

zijn beter te scheiden in een aangepaste hook dan

ze te implementeren in de component zelf, omdat dit de herbruikbaarheid en leesbaarheid ten goede komt.

Reden

De reden waarom React geen toegang heeft tot globale objecten – je moet het concept van React begrijpen.

1) Inkapseling en modulariteit

- Elke component moet onafhankelijk en herbruikbaar zijn. Als veel componenten afhankelijk zijn van globale objecten, gaat de onafhankelijkheid verloren en wordt het systeem erg complex.

2) Prestaties en onderhoudgemak

- React rendert opnieuw wanneer de status verandert, maar globale objecten zijn niet geschikt om statuswijzigingen bij te houden.

3) Statusbeheer centraal

- Als je toch meerdere variabelen wilt delen, gebruik dan een centraal statusbeheersysteem zoals Redux.

Centraal -> de gegevenstroom naar componenten controleren om fouten te voorkomen en onderhoud te vereenvoudigen.

* Server-side rendering

Tegenwoordig wordt server-side rendering vaak gebruikt voor SEO (zoekmachineoptimalisatie), maar het window-object is niet toegankelijk op de server!

Reflectie

Dit zijn de vallen en opstaan die ik heb meegemaakt tijdens mijn eerste React-project.

Ik heb meer dan 2 jaar ervaring met Vue in de praktijk, maar toen ik met een React-project begon,

was ik behoorlijk in de war omdat ik Kakao Map niet kon weergeven...!!!

Vergeleken met Vue voelt het, met zijn mapstructuur en hooks, wat vrijer aan, wat het eigenlijk moeilijker maakt.

Ik denk er veel over na hoe ik het efficiënt kan schrijven.

Ik moet dit speelgoedproject, zoals de naam al zegt, als een speelgoed behandelen en er meer vertrouwd mee raken.

* Durumis is best uniek en leuk voor een eerste blog.

Het genereert ook een 3-punts samenvatting, wat Koreanen leuk vinden haha.

Zou ik misschien ook buitenlandse ontwikkelaars kunnen ontmoeten?

De code-editor zou wat verbetering kunnen gebruiken.

Reacties en feedback zijn welkom!~

Ik wens je een fijne dag!