React - kakao is not defined Bagaimana Mengatasinya?

• Masalah
• Solusi
• Alasan
• Refleksi
  
  
  

Masalah

Saat mengintegrasikan API Kakao Map di lingkungan React 18 dan create-react-app, peta tidak dirender!

Saya telah menyisipkan tag skrip di dalam tag head, jadi saya pikir itu akan dimuat sebelum browser dirender.

**Saya telah menulis HTML, tetapi tidak ditampilkan!!**

~Kira-kira kode untuk memanggil Kakao Map di dalam tag head index.html~

Namun, di konsol hanya menampilkan 'kakao is not defined'dan tidak ada yang dirender.

Solusi

Dasar: Komponen React tidak mengakses objek global secara langsung.

Solusi 1-1

Deklarasikan properti kakao dari objek global di luar fungsi komponen.

Solusi 1-2

Buat fungsi-fungsi yang dibutuhkan untuk merender Kakao Map di hook khusus.

Event drag, klik, dan penanganan marker, biasanya fungsi yang dibutuhkan peta

lebih baik dipisahkan ke hook khusus daripada diimplementasikan dalam komponen,

karena lebih baik dari segi reusability dan readability.

Alasan

Alasan React tidak mengakses objek global – perlu memahami konsep React.

1) Enkapsulasi dan Modularitas

- Setiap komponen harus independen dan dapat digunakan kembali. Jika banyak komponen bergantung pada objek global, independensi akan hilang dan menjadi sangat kompleks.

2) Performa dan Kemudahan Pemeliharaan

- React melakukan render ulang ketika state berubah, dan objek global tidak cocok untuk melacak perubahan state.

3) Manajemen State di Pusat

- Namun, jika perlu berbagi banyak variabel, gunakan library manajemen state terpusat seperti Redux.

Pusat -> kendalikan aliran data ke komponen untuk menghindari error dan mempermudah pemeliharaan.

* Server-Side Rendering

Saat ini, Server-Side Rendering banyak digunakan untuk SEO (Search Engine Optimization), tetapi objek window tidak dapat diakses di sisi server!!

Refleksi

Ini adalah coba-coba yang saya alami saat mengerjakan proyek React pertama saya.

Saya telah bekerja dengan Vue selama lebih dari 2 tahun, tetapi saat memulai proyek React,

Saya cukup terkejut karena tidak bisa menampilkan Kakao Map...!!!

Dibandingkan dengan Vue, struktur folder dan hook terasa sedikit lebih bebas, malah membuatnya lebih sulit.

Saya banyak berpikir tentang cara penulisan yang efisien.

Saya harus mempelajari lebih lanjut dengan menggunakannya seperti mainan, sesuai dengan namanya proyek mainan.

* Ini adalah pengalaman pertama saya menulis blog, dan durumis (두루미스) cukup unik dan menyenangkan.

Ia juga menyediakan ringkasan 3 poin yang disukai orang Korea, haha.

Mungkinkah saya bisa bertemu dengan pengembang internasional juga?

Editor kode perlu ditingkatkan.

Saya menerima masukan dan kritik!

Semoga harimu menyenangkan!