React - kakao não definido como resolver?

• Problema
• Solução
• Razão
• Considerações finais
  
  
  

Problema

No ambiente React 18 e create-react-app, durante a integração da API do Kakao Map, o mapa não foi renderizado!

Como a tag de script foi inserida na tag head, pensei que seria carregada antes do navegador renderizar.

**Escrevi o HTML, mas não está sendo exibido!!**

~Basicamente, o código para carregar o Kakao Map dentro da tag head do index.html~

No entanto, no console,apenas "kakao is not defined" foi gravadoe nada foi renderizado.

Solução

Conceito básico: Os componentes React não acessam diretamente objetos globais.

Solução 1-1

Declare a propriedade kakao do objeto global fora da função do componente.

Solução 1-2

Crie funções personalizadas para as funções necessárias para renderizar o Kakao Map.

Eventos de arrastar, clicar e manipulação de marcadores, etc., que são normalmente necessários para o mapa

são mais reutilizáveis ​​e legíveis se forem separados em um hook personalizado

em vez de implementados dentro de um componente.

Razão

É necessário entender o conceito do React para entender por que o React não acessa objetos globais.

1) Encapsulamento e Modularidade

- Cada componente deve ser independente e reutilizável. Se muitos componentes dependerem de objetos globais, a independência será perdida e ficará muito complexo.

2) Desempenho e Facilidade de Manutenção

- O React renderiza novamente quando o estado muda, mas os objetos globais não são adequados para rastrear as mudanças de estado.

3) Gerenciamento de Estado Centralizado

- No entanto, se você deseja compartilhar várias variáveis, use uma biblioteca de gerenciamento de estado centralizado, como o Redux.

Centralizado -> controla o fluxo de dados para o componente para evitar erros e facilitar a manutenção.

* Renderização do lado do servidor

Recentemente, a renderização do lado do servidor tem sido amplamente utilizada para SEO (otimização de mecanismos de pesquisa), mas o objeto window não está disponível no lado do servidor!!

Considerações finais

Este é um erro que encontrei durante meu primeiro projeto React.

Trabalhei com Vue por mais de dois anos, mas quando comecei um projeto React,

fiquei bastante surpreso por não conseguir exibir o Kakao Map...!!!

Em comparação com o Vue, a estrutura de pastas e os hooks parecem mais livres, o que torna o React mais difícil.

Estou pensando muito sobre como escrever de forma eficiente.

Preciso aprender mais brincando com o projeto de brinquedo, como o próprio nome sugere.

* O durumis é bastante único e divertido, é meu primeiro blog.

Ele também fornece um resumo de 3 linhas que os coreanos adoram hahaha

Talvez eu possa conhecer desenvolvedores estrangeiros também?

O editor de código poderia ser melhorado.

Comentários e correções são bem-vindos~!

Tenha um ótimo dia!