React - kakao n'est pas défini : comment résoudre ce problème ?

• Problème
• Solution
• Raison
• Réflexions
  
  
  

Problème

Lors de l'intégration de l'API de Kakao Map dans un environnement React 18 avec create-react-app, la carte ne s'affichait pas !

J'avais inséré la balise script dans la balise head, donc je pensais qu'elle serait chargée avant le rendu du navigateur.

** J'ai écrit le code HTML, mais il ne s'affiche pas !! **

~En gros, le code pour appeler Kakao Map dans la balise head de index.html~

Cependant, dans la console, seul « kakao is not defined » était enregistréet rien n'était affiché.

Solution

Fondamentaux : les composants React n'accèdent pas directement aux objets globaux.

Solution 1-1

Déclarer l'attribut kakao extrait de l'objet global en dehors de la fonction composant.

Solution 1-2

Créer des fonctions personnalisées pour le rendu de la carte Kakao dans un hook personnalisé.

Les fonctions généralement nécessaires pour la carte, telles que les événements de glisser-déposer, les événements de clic et la gestion des marqueurs,

sont plus faciles à gérer et à réutiliser si elles sont séparées dans un hook personnalisé plutôt que d'être implémentées dans le composant.

Cela améliore la lisibilité et la réutilisabilité du code.

Raison

Il est important de comprendre le concept de React pour comprendre pourquoi il ne faut pas accéder aux objets globaux dans React.

1) Encapsulation et modularité

- Chaque composant doit être indépendant et réutilisable. Si de nombreux composants dépendent d'objets globaux, l'indépendance est perdue et la complexité augmente considérablement.

2) Performances et maintenance simplifiée

- React effectue un rendu à chaque fois que l'état change, et les objets globaux ne conviennent pas au suivi de ces changements d'état.

3) Gestion d'état centralisée

- Si vous devez partager plusieurs variables, utilisez une bibliothèque de gestion d'état centralisée comme Redux.

Centre -> Contrôle du flux de données vers les composants pour éviter les erreurs et faciliter la maintenance.

* Rendu côté serveur

Récemment, le rendu côté serveur est de plus en plus utilisé pour le référencement (SEO), mais l'objet window n'est pas accessible côté serveur !

Réflexions

Ce sont les erreurs que j'ai commises lors de mon premier projet React.

J'ai travaillé avec Vue pendant plus de deux ans, et lorsque j'ai commencé un projet React,

j'ai été très surpris de ne pas pouvoir afficher la carte Kakao !!!

Par rapport à Vue, la structure des dossiers et les hooks donnent une impression de plus grande liberté, ce qui le rend plus difficile à utiliser.

Je me pose beaucoup de questions sur la façon la plus efficace de l'écrire.

Je dois continuer à apprendre en utilisant des projets jouets, comme leur nom l'indique.

* Durumis est un service assez unique et amusant pour un premier blog.

Il propose également un résumé en trois points que les Coréens apprécient beaucoup, haha.

Pourrais-je également rencontrer des développeurs étrangers ?

L'éditeur de code pourrait être amélioré.

N'hésitez pas à partager vos commentaires et vos critiques !

Passez une bonne journée !