Tema
- #Frontend
- #Hook personalizado
- #Integración de Kakao Map en React
- Problema
- Solución
- Razón
- Reflexiones
Problema
¡Mientras integraba la API de Kakao Map en un entorno de React 18 y create-react-app, el mapa no se renderizaba!
Había insertado la etiqueta de script dentro de la etiqueta head, por lo que pensé que se cargaría antes de que el navegador comenzara a renderizar.
¡** Escribí el código HTML, pero no se ve!!**
~Algo así como el código para cargar Kakao Map dentro de la etiqueta head de index.html~
Sin embargo, en la consola solo se registraba "kakao is not defined"y nada se renderizaba.
Solución
Fundamento: Los componentes de React no acceden directamente a los objetos globales.
Solución 1-1
Declarar la propiedad kakao fuera de la función del componente, extrayéndola del objeto global.
Solución 1-2
Crear un hook personalizado para las funciones necesarias para renderizar el mapa de Kakao.
Los eventos de arrastre, clic, el manejo de marcadores y otras funciones generalmente necesarias para el mapa
son mejores
si se separan en un hook personalizado en lugar de implementarse dentro del componente,
en términos de reutilización y legibilidad.
Razón
Es necesario comprender el concepto de React para comprender por qué React no accede a los objetos globales.
1) Encapsulación y modularidad
- Cada componente debe ser independiente y reutilizable. Si muchos componentes dependen de objetos globales, se pierde la independencia y se vuelve muy complejo.
2) Rendimiento y fácil mantenimiento
- React vuelve a renderizar cuando cambia el estado, y los objetos globales no son adecuados para rastrear los cambios de estado.
3) Gestión del estado desde el centro
- Sin embargo, si se necesitan compartir varias variables, se utiliza una biblioteca de gestión centralizada del estado como Redux.
Centro -> Control del flujo de datos al componente para evitar errores y facilitar el mantenimiento.
* Renderizado del lado del servidor
Recientemente, se ha utilizado mucho el renderizado del lado del servidor para SEO (optimización de motores de búsqueda), ¡pero el objeto window no está disponible en el lado del servidor!
Reflexiones
Este es un error que encontré mientras trabajaba en mi primer proyecto de React.
He estado trabajando con Vue durante más de 2 años en entornos profesionales, pero al comenzar un proyecto de React
¡Me sorprendió bastante no poder mostrar el mapa de Kakao...!!!
En comparación con Vue, la estructura de carpetas, los hooks y otras características se sienten un poco más libres, lo que en realidad lo hace más difícil.
Me hace pensar mucho en cuál es la forma más eficiente de escribirlo.
Debo seguir practicando con proyectos pequeños, como un juguete, para aprender más.
* Durumis (두루미스) es bastante único e interesante para un blog novato.
También proporciona un resumen de 3 líneas que a los coreanos les gusta mucho, jajaja.
¿No sería genial poder conocer a desarrolladores extranjeros también?
Sería bueno que el editor de código se mejorara un poco.
¡Se agradecen los intercambios de opiniones y las críticas!
¡Que tenga un buen día!
Comentarios0