React - kakao Tanımlanmamış (kakao is not defined) Hatası Nasıl Çözülür?

• Problem
• Çözüm
• Sebep
• Düşünceler
  
  
  

Problem

React 18, create-react-app ortamında Kakao Haritalar API'sini entegre ederken, harita render edilmedi!

Head etiketine script etiketini eklemiştim, bu yüzden tarayıcının render edilmeden önce yüklenmesini bekledim.

**Html'i yazdım ama görünmüyor!!**

~Kısaca index.html'in head etiketine Kakao Haritalar'ı çağırma kodunu yazdım~

Ancak konsolda sadece 'kakao is not defined' yazıyorve hiçbir şey render edilmiyor.

Çözüm

Temel: React bileşenleri global nesnelere doğrudan erişmez.

Çözüm 1-1

Bileşen fonksiyonunun dışında global nesneden kakao özelliğini çekip bildiririz.

Çözüm 1-2

Kakao Haritalar'ı render etmek için gereken fonksiyonları ayrı bir özel hook'ta yazarız.

Sürükle bırak olayı, tıklama olayı, işaretleyici işleme gibi genel olarak haritanın ihtiyaç duyduğu fonksiyonlar

bileşen içinde uygulamak yerine

özel hook'ta ayırmak, yeniden kullanılabilirlik ve okunabilirlik açısından daha iyidir.

Sebep

React'te global nesnelere erişilmemesinin sebebi - React'in konseptini anlamak gerekir.

1) Kapsülleme ve Modülerlik

- Her bileşen bağımsız ve yeniden kullanılabilir olmalıdır. Çok sayıda bileşenin global nesnelere bağımlı olması, bağımsızlığı kaybetmesine ve oldukça karmaşık hale gelmesine neden olur.

2) Performans ve Kolay Bakım

- React, durum değiştiğinde yeniden render eder, global nesneler durum değişikliklerini izlemek için uygun değildir.

3) Durum Yönetimi Ortada

- Yine de birçok değişkeni paylaşmak gerekiyorsa, Redux gibi merkezi durum yönetimi kütüphaneleri kullanılır.

Orta -> Bileşenlere veri akışını kontrol ederek hataları önler ve bakımı kolaylaştırır.

* Sunucu Tarafı Render

Son zamanlarda SEO (Arama Motoru Optimizasyonu) için sunucu tarafı render etme sıklıkla kullanılıyor ve window nesnesine sunucu tarafında erişilemiyor!!

Düşünceler

İlk React projemde yaşadığım deneme yanılma sürecidir.

2 yıldan fazla süredir Vue ile uygulama geliştiriyorum ve React projesine başlarken

Kakao Haritalar'ı gösteremeyince oldukça şaşırdım...!!!

Vue'ya kıyasla, klasör yapısı ve hook'lar gibi daha özgür bir his veriyor ve bu da onu benim için daha zorlu hale getiriyor.

En verimli şekilde nasıl yazılır diye çok düşünüyorum.

Toy proje, tam anlamıyla oyuncak gibi ele alarak daha fazla öğrenmem gerekiyor.

* Blog yazmak ilk deneyimim ve 'durumis' oldukça özgün ve eğlenceli.

Ayrıca Türklerin sevdiği 3 maddelik özet de sunuyor ㅋㅋ

Yurtdışındaki geliştiricilerle de tanışabilir miyim acaba?

Kod editörü biraz daha geliştirilebilir.

Görüş alışverişi ve eleştirileriniz için teşekkürler~!

Mutlu günler dilerim!