React - kakao non definito: come risolvere?

• Problema
• Soluzione
• Motivo
• Riflessioni
  
  
  

Problema

Durante l'integrazione dell'API di Kakao Map in un ambiente React 18 con create-react-app, la mappa non veniva renderizzata!

Poiché ho inserito il tag script all'interno del tag head, pensavo che sarebbe stato caricato prima del rendering del browser.

**Ho scritto l'HTML, ma non si vede!!**

~All'incirca il codice per caricare Kakao Map all'interno del tag head di index.html~

Tuttavia, nella consoleveniva registrato solo "kakao is not defined"e nulla veniva renderizzato.

Soluzione

Fondamentale: i componenti di React non accedono direttamente agli oggetti globali.

Soluzione 1-1

Dichiarare l'attributo kakao estratto dall'oggetto globale all'esterno della funzione componente.

Soluzione 1-2

Creare un hook personalizzato per le funzioni necessarie per il rendering della mappa di Kakao.

Gli eventi di trascinamento, di clic e la gestione dei marker, ovvero le funzionalità generalmente necessarie per la mappa,

invece di implementarle all'interno del componente,

è preferibile separarle in un hook personalizzato, in termini di riusabilità e leggibilità.

Motivo

È necessario comprendere il concetto di React per capire perché in React non si accede agli oggetti globali.

1) Incapsulamento e modularità

- Ogni componente deve essere indipendente e riutilizzabile. Se molti componenti dipendono da un oggetto globale, si perde l'indipendenza e la complessità aumenta notevolmente.

2) Prestazioni e facilità di manutenzione

- React esegue il re-rendering quando lo stato cambia, ma gli oggetti globali non sono adatti per tracciare le modifiche di stato.

3) Gestione dello stato centralizzata

- Tuttavia, se si desidera condividere più variabili, si utilizzano librerie di gestione dello stato centralizzato come Redux.

Centro -> Controllo del flusso dei dati al componente per evitare errori e semplificare la manutenzione.

* Rendering lato server

Recentemente, il rendering lato server è diventato molto popolare per l'ottimizzazione SEO (Search Engine Optimization), ma l'oggetto window non è accessibile dal lato server!!

Riflessioni

Questo è un problema che ho incontrato durante il mio primo progetto React.

Ho lavorato con Vue per oltre 2 anni, ma quando ho iniziato un progetto React,

sono rimasto piuttosto sconcertato dal non riuscire a visualizzare la mappa di Kakao...!!!

Rispetto a Vue, la struttura delle cartelle e gli hook sono un po' più liberi, il che lo rende in realtà più difficile.

Mi pongo spesso la domanda su quale sia il modo più efficiente di scrivere il codice.

Dovrò imparare di più giocando con il progetto toy, proprio come un giocattolo.

* Durumis è un servizio piuttosto insolito e divertente per il mio primo blog.

Offre anche un riepilogo in 3 punti che piace molto ai coreani, haha.

Potrei anche incontrare sviluppatori stranieri?

L'editor di codice potrebbe essere migliorato.

Sono aperto a scambi di opinioni e critiche~!

Spero che abbiate una bella giornata!