रिएक्ट - kakao परिभाषित नहीं है, इसे कैसे ठीक करें?

• समस्या
• समाधान
• कारण
• भावनाएँ
  
  
  

समस्या

React 18, create-react-app वातावरण में Kakao मानचित्र API को एकीकृत करते समय, मानचित्र रेंडर नहीं हुआ!

हेड टैग में स्क्रिप्ट टैग डाला गया था, इसलिए मुझे लगा कि ब्राउज़र द्वारा रेंडर होने से पहले यह लोड हो जाएगा।

** HTML लिखा है, लेकिन दिखाई नहीं दे रहा है!!

~ index.html के हेड टैग में Kakao मानचित्र को लोड करने का कोड ~

लेकिन कंसोल में केवल '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 की तुलना में, फ़ोल्डर संरचना और हुक आदि थोड़े अधिक स्वतंत्र हैं, इसलिए यह मुश्किल लगता है।

मुझे लगातार सोचना पड़ता है कि इसे कैसे कुशलतापूर्वक लिखा जाए।

मुझे लगता है कि मुझे खिलौना परियोजना, जैसा कि इसके नाम से पता चलता है, एक खिलौने की तरह संभालना चाहिए और इसे और अधिक जानना चाहिए।

* यह मेरा पहला ब्लॉग है, और 'दुरुमिस' (durumis) काफी अनोखा और मजेदार है।

यह 3-पंक्ति सारांश भी देता है जिसे कोरियाई लोग पसंद करते हैं ㅋㅋ

क्या मैं विदेशी डेवलपर्स से भी मिल सकता हूँ?

कोड संपादक को थोड़ा और बेहतर किया जा सकता है।

राय का आदान-प्रदान और सुझावों का स्वागत है ~!

आपका दिन शुभ हो!