Dies ist ein von KI übersetzter Beitrag.
Sprache auswählen
Von durumis AI zusammengefasster Text
- Das Problem, dass die Karte nicht gerendert wird, wenn die Kakao Map API in React 18 mit der create-react-app-Umgebung integriert wird, liegt daran, dass React-Komponenten nicht direkt auf globale Objekte zugreifen.
- React vermeidet den direkten Zugriff auf globale Objekte, um Kapselung, Leistung und Zustandsverwaltung zu gewährleisten. Es werden stattdessen zentrale Zustandsverwaltungsbibliotheken wie Redux verwendet, um den Datenfluss zu steuern.
- Im Gegensatz zu Vue bietet React mehr Flexibilität in Bezug auf Ordnerstruktur, Hooks usw., kann aber für Anfänger verwirrend sein. Es ist empfehlenswert, sich mit Toy-Projekten vertraut zu machen.
- Problem
- Lösung
- Grund
- Gedanken
Problem
Während der Integration der Kakao Map API in einer React 18, create-react-app-Umgebung wurde die Karte nicht gerendert!
Da ich ein Skript-Tag innerhalb des head-Tags eingefügt habe, dachte ich, dass es vor dem Rendern des Browsers geladen werden würde.
** Das HTML wurde erstellt, aber es wird nicht angezeigt!!
~Ungefähr der Code, um Kakao Map in das head-Tag von index.html aufzurufen~
<!-- 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 laden Aber in der Konsole wurde nur kakao ist nicht definiert angezeigtund nichts wurde gerendert.
Lösung
Grundlage: React-Komponenten greifen nicht direkt auf globale Objekte zu.
Lösung 1-1
Deklarieren Sie den kakao-Attribut außerhalb der Komponentenfuktion als globales Objekt.
const { kakao } = window;
function Map() {
//...Lösung 1-2
Erstellen Sie separate benutzerdefinierte Hooks für die Funktionen, die zum Rendern der Kakao-Karte benötigt werden.
//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>
)
Drag-Events, Klick-Events, Marker-Handling usw., die Funktionen, die im Allgemeinen für die Karte benötigt werden,
werden
besser in separate benutzerdefinierte Hooks anstatt in die Komponente integriert, da dies in Bezug auf die Wiederverwendbarkeit und Lesbarkeit von Vorteil ist.
Grund
Es ist notwendig, das Konzept von React zu verstehen, warum React nicht auf globale Objekte zugreift.
1) Kapselung und Modularität
- Jede Komponente sollte unabhängig und wiederverwendbar sein. Wenn sich viele Komponenten auf globale Objekte verlassen, geht die Unabhängigkeit verloren und es wird sehr kompliziert.
2) Leistung und einfache Wartung
- React rendert die Komponenten neu, wenn sich der Zustand ändert, und globale Objekte sind nicht gut geeignet, um Zustandsänderungen zu verfolgen.
3) Zustandsverwaltung erfolgt zentral
- Wenn dennoch mehrere Variablen gemeinsam genutzt werden müssen, wird eine zentrale Zustandsverwaltungs-Bibliothek wie Redux verwendet.
Zentrale -> Steuerung des Datenflusses zur Komponente, um Fehler zu vermeiden und die Wartung zu vereinfachen.
* Server-Side Rendering
In letzter Zeit wird Server-Side Rendering häufig für SEO (Suchmaschinenoptimierung) verwendet, aber auf das Window-Objekt kann nicht vom Server aus zugegriffen werden!!
Gedanken
Dies ist ein Fehler, der bei meinem ersten React-Projekt aufgetreten ist.
Ich habe mehr als 2 Jahre Erfahrung mit Vue im professionellen Bereich, aber als ich mit dem React-Projekt begann,
war ich sehr verwirrt, weil ich die Kakao-Karte nicht anzeigen konnte...!!!
Im Vergleich zu Vue ist es im Hinblick auf Ordnerstruktur und Hooks etwas freier, was es eigentlich schwieriger macht.
Ich denke viel darüber nach, wie man effizient schreiben kann.
Ich muss es als ein Spielzeug-Projekt behandeln und mehr lernen.
* Dies ist mein erster Blog, aber durumis ist sehr einzigartig und macht Spaß.
Es bietet auch eine Zusammenfassung in 3 Zeilen, die Koreaner lieben, lol
Kann man nicht auch Entwickler aus dem Ausland treffen?
Der Code-Editor sollte etwas verbessert werden.
Austausch von Meinungen und Kritik sind willkommen~!
Ich wünsche Ihnen einen schönen Tag!
