React - kakao не определено, как решить?

• Проблема
• Решение
• Причина
• Впечатления
  
  
  

Проблема

Во время интеграции API карты Kakao в среде React 18, create-react-app карта не отображалась!

Я вставил тег скрипта в тег head, поэтому я думал, что он будет загружен до рендеринга браузера.

**Написал html, но он не отображается!!**

~Примерно код, который подключает карту Kakao в тег head index.html~

Однако в консоли отображается только "kakao is not defined"и ничего не рендерится.

Решение

Основа: Компоненты React не имеют прямого доступа к глобальным объектам.

Решение 1-1

Вне функции компонента объявляется свойство kakao из глобального объекта.

Решение 1-2

Функции, необходимые для рендеринга карты Kakao, записываются в отдельный пользовательский хук.

События перетаскивания, события щелчка, обработка маркеров и другие функции, обычно используемые для карт,

лучше выделить в пользовательский хук,

чем реализовывать их внутри компонента, с точки зрения повторного использования и удобочитаемости.

Причина

Необходимо понять концепцию React, почему в React нежелательно обращаться к глобальным объектам.

1) Инкапсуляция и модульность

- Каждый компонент должен быть независимым и повторно используемым. Если множество компонентов зависят от глобального объекта, то независимость теряется, и всё становится очень сложным.

2) Производительность и простота сопровождения

- React перерисовывает компоненты при изменении состояния, а глобальные объекты не подходят для отслеживания изменений состояния.

3) Управление состоянием в централизованном месте

- Если всё же требуется обмен данными между несколькими переменными, то используются библиотеки централизованного управления состоянием, такие как Redux.

Центр -> управление потоком данных к компонентам, чтобы избежать ошибок и упростить сопровождение.

* Рендеринг на стороне сервера

В последнее время для SEO (оптимизации поисковой выдачи) часто используется рендеринг на стороне сервера, но к объекту window невозможно получить доступ на стороне сервера!!

Впечатления

Это трудности, с которыми я столкнулся во время своего первого проекта на React.

Я более 2 лет занимался разработкой на Vue, но при начале проекта на React

был очень удивлен, что не смог отобразить карту Kakao...!!!

По сравнению с Vue, структура папок и хуки кажутся более свободными, что, наоборот, затрудняет работу.

Много думаю о том, как писать эффективно.

Нужно больше практиковаться с toy-проектами, как с игрушками.

* Дурумис (durumis) - довольно необычный и интересный сервис для блога.

Он также предлагает 3-точечное резюме, которое так любят корейцы ㅋㅋ

Может быть, я смогу познакомиться с зарубежными разработчиками?

Хотелось бы, чтобы редактор кода был немного улучшен

Буду рад обмену мнениями и конструктивной критике~!

Желаю вам хорошего дня!