Bu, AI tarafından çevrilen bir gönderidir.
Dil Seç
Text summarized by durumis AI
- React 18'de create-react-app ortamında Kakao Haritalar API'sini entegre etme sürecinde haritanın işlenmemesiyle ortaya çıkan sorun, React bileşenlerinin küresel nesnelere doğrudan erişmemesinden kaynaklanmaktadır.
- React, kapsülleme, performans ve durum yönetimi gibi nedenlerle küresel nesnelere doğrudan erişmez ve Redux gibi merkezi durum yönetim kitaplıkları kullanarak veri akışını kontrol eder.
- Vue'dan farklı olarak React, klasör yapısı veya kancalar gibi konularda daha özgür bir his verir ancak yeni başlayan geliştiriciler için daha zorlayıcı olabilir, bu nedenle bir oyuncak proje aracılığıyla aşinalık kazanmak faydalı olabilir.
- Sorun
- Çözüm
- Neden
- Duygular
Sorun
React 18, create-react-app ortamında Kakao Haritalar API'sini entegre ederken harita render edilmedi!
Head etiketi içine script etiketi eklediğim için tarayıcının render edilmeden önce yüklenmesi gerektiğini düşündüm.
** html'yi yazdım ama görünmüyor!!
~ index.html'nin head etiketi içine Kakao Haritaları'nı çağırma kodu ~
<!-- index.html -->
<head>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_API_KEY%&libraries=services,clusterer,drawing" id="map-lib"></script>useEffect(() => {
// haritayı yükleAncak konsolda kakao tanımsız yalnızca yazılırve hiçbir şey render edilmedi.
Çözüm
Temel: React bileşenleri küresel nesnelere doğrudan erişmez.
Çözüm 1-1
Bileşen fonksiyonunun dışında küresel nesneden kakao özelliğini çekip bildir.
const { kakao } = window;
function Map() {
//...Çözüm 1-2
Kakao Haritaları'nı render etmek için gereken fonksiyonları ayrı bir özel hook'a yaz.
//hooks/useKakaoMap.js
const { kakao } = window;
function useKakaoMap() {
const initializeMap = useCallback(() => {
const container = document.getElementById('map');
const options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
const newMap = new kakao.maps.Map(container, options);
setMap(newMap);
}, []);
//...
return {
initializeMap
}
}
export default useKakaoMap;
//Map.js
function Map() {
const {
initializeMap,
} = useKakaoMap();
useEffect(() => {
initializeMap();
}, [initializeMap]);
return(
<div id="map"></div>
)
Sürükleme olayı, tıklama olayı, işaretçi işleme gibi genel olarak haritanın gerekli fonksiyonları
bileşen içinde uygulamak yerine,
özel hook'larda ayırmak, yeniden kullanılabilirlik ve okunabilirlik açısından daha iyidir.
Neden
React'te küresel nesnelere erişmemek nedeni - React'in kavramlarını anlamanız gerekiyor.
1) Kapsülleme ve Modülerlik
- Her bileşen bağımsız ve yeniden kullanılabilir olmalıdır. Birçok bileşenin küresel nesneye bağımlı olması bağımsızlığı ortadan kaldıracak ve oldukça karmaşık hale getirecektir.
2) Performans ve Kolay Bakım
- React, durum değiştiğinde yeniden render eder, küresel nesneler durum değişikliklerini izlemek için uygun değildir.
3) Durum Yönetimi Merkezileştirilmiş Olarak
- Yine de birçok değişkeni paylaşmanız gerekiyorsa Redux gibi merkezi durum yönetimi kitaplıkları kullanın.
Merkezi -> bileşenlere veri akışını kontrol ederek hataları önleyin ve bakımı kolaylaştırın.
* Sunucu Tarafı Renderlama
Son zamanlarda SEO (arama motoru optimizasyonu) için sunucu tarafı renderlama sıklıkla kullanılıyor ve window nesnesine sunucu tarafında erişilemiyor!
Duygular
İlk React projemi yaparken yaşadığım bir hataydı.
Vue ile 2 yıldan fazla bir süredir üretim yapıyorum, ancak React projesine başlarken
Kakao Haritaları'nı gösteremediğim için oldukça şaşırdım...!!!
Vue'ya kıyasla klasör yapısı ve hook'lar biraz daha özgür, bu da onu daha zorlaştırıyor.
En verimli şekilde nasıl yazılır? Düşünmek için çok şey var.
Oyuncak projeyi, yani gerçek anlamda bir oyuncak gibi kullanarak daha fazla öğrenmem gerekiyor.
* Blog yeni ama durumis oldukça benzersiz ve eğlenceli.
Korelilerin sevdiği 3 satırlık özeti de veriyor ㅋㅋ
Yurtdışındaki geliştiricilerle tanışamam mı?
Kod düzenleyicinin biraz iyileştirilmesi gerekiyor
Görüş alışverişi, eleştiriye açığım~!
Mutlu günler!
