यह एक AI अनुवादित पोस्ट है।
भाषा चुनें
durumis AI द्वारा संक्षेपित पाठ
- रिएक्ट 18 में क्रिएट-रिएक्ट-ऐप एनवायरनमेंट के साथ काकाओ मैप API को इंटीग्रेट करते समय मैप रेंडर नहीं होने की समस्या रिएक्ट कंपोनेंट के ग्लोबल ऑब्जेक्ट्स तक सीधे एक्सेस करने के कारण होती है।
- रिएक्ट, एनकैप्सुलेशन, परफॉर्मेंस, स्टेट मैनेजमेंट आदि के लिए ग्लोबल ऑब्जेक्ट्स तक सीधे एक्सेस नहीं करता है, और डेटा फ्लो को कंट्रोल करने के लिए रीडक्स जैसे सेंट्रलाइज्ड स्टेट मैनेजमेंट लाइब्रेरी का उपयोग करता है।
- व्यू के विपरीत, रिएक्ट फोल्डर संरचना या हुक्स में अधिक स्वतंत्रता प्रदान करता है, लेकिन यह शुरुआती डेवलपर्स के लिए भ्रमित करने वाला हो सकता है, और टॉय प्रोजेक्ट के माध्यम से इसका अभ्यास करने की सलाह दी जाती है।
- समस्या
- समाधान
- कारण
- भावनाएँ
समस्या
React 18, create-react-app वातावरण में, काकाओ मानचित्र API को एकीकृत करते समय, मानचित्र प्रस्तुत नहीं किया गया!
हेड टैग के अंदर स्क्रिप्ट टैग सम्मिलित किया गया था, इसलिए मुझे लगा कि ब्राउज़र द्वारा प्रस्तुत करने से पहले इसे लोड किया जाएगा।
**html लिखा है, लेकिन यह दिखाई नहीं दे रहा है!!**
~आप index.html के हेड टैग के अंदर काकाओ मैप को लाने वाले कोड को ~
<!-- 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(() => {
// map लाना लेकिन कंसोल मेंkakao is not defined केवल रिकॉर्ड किया गया हैकुछ भी प्रस्तुत नहीं किया गया था।
समाधान
बुनियादी बातें: रिएक्ट के घटक वैश्विक वस्तुओं तक सीधे पहुँच नहीं करते हैं।
समाधान 1-1
घटक फ़ंक्शन के बाहर वैश्विक वस्तु से काकाओ विशेषता निकालें और उसे घोषित करें।
const { kakao } = window;
function Map() {
//...समाधान 1-2
काकाओ मैप को प्रस्तुत करने के लिए आवश्यक कार्यों को अलग कस्टम हुक में लिखें।
//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>
)
ड्रैग इवेंट, क्लिक इवेंट, मार्कर हैंडलिंग आदि सामान्य रूप से मानचित्र के आवश्यक कार्यों को
घटक के अंदर लागू करने के बजाय,
कस्टम हुक से अलग करना पुन: प्रयोज्यता और पठनीयता के मामले में बेहतर है।
कारण
रिएक्ट में वैश्विक वस्तुओं तक पहुँचने के पीछे का कारण - रिएक्ट की अवधारणा को समझने की आवश्यकता है।
1) इनकैप्सुलेशन और मॉड्यूलरिटी
- प्रत्येक घटक स्वतंत्र और पुन: प्रयोज्य होना चाहिए। वैश्विक वस्तुओं पर निर्भर कई घटकों से स्वतंत्रता खो जाएगी, और यह बहुत जटिल हो जाएगा।
2) प्रदर्शन और आसान रखरखाव
- रिएक्ट राज्य बदलने पर पुन: प्रस्तुत करता है, वैश्विक वस्तुएं राज्य परिवर्तन को ट्रैक करने के लिए उपयुक्त नहीं हैं।
3) राज्य प्रबंधन केंद्रीय रूप से है
- फिर भी, कई चर साझा करने के लिए, Redux जैसी केंद्रीय राज्य प्रबंधन लाइब्रेरी का उपयोग करें।
केंद्र -> घटकों के लिए डेटा प्रवाह को नियंत्रित करें ताकि त्रुटियों से बचा जा सके और रखरखाव आसान हो सके।
* सर्वर-साइड रेंडरिंग
हाल के वर्षों में, SEO (सर्च इंजन ऑप्टिमाइजेशन) के लिए सर्वर-साइड रेंडरिंग का व्यापक रूप से उपयोग किया जाता है, लेकिन सर्वर-साइड पर window ऑब्जेक्ट तक पहुँचा नहीं जा सकता है!!
भावनाएँ
यह मेरी पहली रिएक्ट प्रोजेक्ट में सामने आई एक गलती है।
vue के साथ 2 साल से भी अधिक समय तक काम करने के बाद, रिएक्ट प्रोजेक्ट शुरू करते समय
मैं काकाओ मैप को प्रस्तुत करने में असमर्थ होने के कारण काफी भ्रमित था...!!!
vue की तुलना में, फ़ोल्डर संरचना और हुक आदि थोड़े अधिक लचीले हैं, जो वास्तव में मुश्किल है।
मैं यह सोचने लगा हूँ कि इसे कैसे प्रभावी ढंग से लिखा जाए।
मुझे लगता है कि मुझे खिलौना प्रोजेक्ट, यानी खिलौनों की तरह, थोड़ा और सीखना चाहिए।
* यह मेरा पहला ब्लॉग है, लेकिन दुरुमिस काफी अनोखा और मजेदार है।
यह कोरियाई लोगों को पसंद आने वाले 3-लाइन सारांश भी प्रदान करता है ㅋㅋ
क्या मैं विदेशी डेवलपर्स से भी मिल सकता हूँ?
मुझे लगता है कि कोड संपादक को थोड़ा बेहतर किया जा सकता है।
विचारों का आदान-प्रदान, सुझावों का स्वागत है~!
आपका दिन शुभ हो!
