React - kakao is not defined jak to naprawić?

• Problem
• Rozwiązanie
• Przyczyna
• Wnioski
  
  
  

Problem

Podczas integracji API Map Kakao w środowisku React 18 z create-react-app, mapa nie renderowała się!

Zakładałem, że ponieważ wstawiłem tag skryptu w tagu head, zostanie załadowany przed renderowaniem przeglądarki.

** Napisałem kod HTML, ale nie wyświetla się!!**

~Wstawienie kodu ładującego mapę Kakao do tagu head pliku index.html~

Jednak w konsoli wyświetlał się tylko komunikat "kakao is not defined"i nic nie było renderowane.

Rozwiązanie

Podstawy: Komponenty React nie uzyskują bezpośredniego dostępu do obiektów globalnych.

Rozwiązanie 1-1

Poza funkcją komponentu zadeklaruj atrybut kakao z obiektu globalnego.

Rozwiązanie 1-2

Utwórz niestandardowy hook, w którym umieścisz funkcje potrzebne do renderowania mapy Kakao.

Ogólnie rzecz biorąc, funkcje obsługujące zdarzenia przeciągania, klikania i znaczników

są bardziej

wygodne w użyciu i czytelniejsze, jeśli zostaną wyodrębnione do niestandardowego hooka niż wbudowane w komponent.

Przyczyna

Aby zrozumieć powód, dla którego React nie uzyskuje dostępu do obiektów globalnych, należy zrozumieć koncepcję React.

1) Inkapsulacja i modularność

- Każdy komponent powinien być niezależny i wielokrotnego użytku. Jeśli wiele komponentów zależy od obiektów globalnych, traci się niezależność i cała struktura staje się bardzo skomplikowana.

2) Wydajność i łatwość konserwacji

- React renderuje ponownie po zmianie stanu, a obiekty globalne nie są odpowiednie do śledzenia zmian stanu.

3) Zarządzanie stanem w centrum

- Jeśli mimo wszystko chcesz udostępnić wiele zmiennych, użyj biblioteki do zarządzania stanem, takiej jak Redux.

Centrum -> Kontrola przepływu danych do komponentów w celu uniknięcia błędów i łatwej konserwacji.

* Renderowanie po stronie serwera

Obecnie renderowanie po stronie serwera jest często używane do optymalizacji SEO (optymalizacja pod kątem wyszukiwarek), ale obiekt window jest niedostępny po stronie serwera!!

Wnioski

To są problemy, z którymi się spotkałem podczas mojego pierwszego projektu React.

Pracowałem z Vue przez ponad 2 lata, ale gdy zacząłem projekt React,

byłem bardzo zdezorientowany, że nie mogłem wyświetlić mapy Kakao...!!!

W porównaniu do Vue, struktura folderów i hooki wydają się być nieco bardziej elastyczne, co sprawia, że ​​jest to dla mnie trudniejsze.

Zastanawiam się, jaki sposób pisania jest najbardziej efektywny.

Muszę kontynuować naukę, traktując projekt typu „toy” jak zabawkę.

* Usługa durumis (두루미스) jest dość wyjątkowa i interesująca.

Generuje również 3-punktowe podsumowania, które lubią Koreańczycy ㅋㅋ

Czy nie można również spotkać zagranicznych programistów?

Edytor kodu mógłby być nieco ulepszony.

Zapraszam do wymiany opinii i wskazówek~!

Życzę miłego dnia!