React - kakao ist nicht definiert – wie behebt man das?

• Problem
• Lösung
• Grund
• Fazit
  
  
  

Problem

Während der Integration der Kakao Map API in einer React 18, create-react-app-Umgebung wurde die Karte nicht gerendert!

Da das Skript-Tag im Head-Tag eingefügt wurde, ging ich davon aus, dass es vor dem Rendern des Browsers geladen wird.

**Das HTML wurde geschrieben, aber es wird nicht angezeigt!!**

~Ungefähr der Code, der Kakao Map in den Head-Tag von index.html lädt~

In der Konsole wurde jedoch nur 'kakao is not defined' protokolliertund nichts wurde gerendert.

Lösung

Grundlagen: React-Komponenten greifen nicht direkt auf globale Objekte zu.

Lösung 1-1

Die Eigenschaft 'kakao' wird außerhalb der Komponentenfunktion aus dem globalen Objekt extrahiert und deklariert.

Lösung 1-2

Die für das Rendern der Kakao Map benötigten Funktionen werden in einem separaten benutzerdefinierten Hook erstellt.

Drag-Events, Klick-Events und die Marker-Bearbeitung usw., die üblicherweise für die Kartenfunktionen benötigt werden,

sind in der Komponente zu implementieren,

aber die Trennung in benutzerdefinierte Hooks ist in Bezug auf Wiederverwendbarkeit und Lesbarkeit besser.

Grund

Der Grund, warum React nicht auf globale Objekte zugreift, liegt darin, dass man das Konzept von React verstehen muss.

1) Kapselung und Modularität

- Jede Komponente sollte unabhängig und wiederverwendbar sein. Wenn viele Komponenten von globalen Objekten abhängig sind, geht die Unabhängigkeit verloren und das Ganze wird sehr komplex.

2) Leistung und einfache Wartung

- React rendert bei Zustandsänderungen neu. Globale Objekte sind nicht gut geeignet, um Zustandsänderungen zu verfolgen.

3) Zustandsverwaltung zentralisiert

- Wenn trotzdem mehrere Variablen gemeinsam genutzt werden sollen, verwendet man Bibliotheken zur zentralen Zustandsverwaltung wie Redux.

Zentral -> Der Datenfluss zur Komponente wird gesteuert, um Fehler zu vermeiden und die Wartung zu erleichtern.

* Server-seitige Darstellung

In letzter Zeit wird Server-Side Rendering (SSR) oft für SEO (Suchmaschinenoptimierung) verwendet. Das Window-Objekt ist jedoch nicht vom Server aus zugänglich!!

Fazit

Dies sind die Schwierigkeiten, die ich bei meinem ersten React-Projekt hatte.

Ich habe über 2 Jahre lang Vue in der Praxis eingesetzt, aber als ich mit einem React-Projekt begann,

war ich sehr überrascht, dass ich Kakao Map nicht anzeigen konnte...!!!

Im Vergleich zu Vue fühlt es sich mit der Ordnerstruktur und den Hooks etwas freier an, was es für mich sogar schwieriger macht.

Ich denke viel darüber nach, wie man es effizient schreibt.

Ich werde das Toy-Projekt, wie der Name schon sagt, wie ein Spielzeug behandeln und es etwas mehr lernen.

* durumis (두루미스) ist ein sehr einzigartiger und lustiger Dienst für Blogs.

Es gibt auch eine 3-Punkte-Zusammenfassung, die Koreaner lieben, haha.

Könnte man nicht auch Entwickler aus dem Ausland treffen?

Der Code-Editor könnte etwas verbessert werden.

Austausch von Meinungen und Kritik sind willkommen~!

Ich wünsche Ihnen einen schönen Tag!