Dit is een door AI vertaalde post.
React - kakao is not defined hoe los je dit op?
- Taal van de tekst: Koreaans
- •
-
Referentieland: Alle landen
- •
- Informatietechnologie
0000-00-00 00:00:00
Selecteer taal
Samengevat door durumis AI
- Het probleem dat optreedt wanneer de kaart niet wordt gerenderd tijdens het integreren van de Kakao Map API in een React 18 create-react-app-omgeving, is te wijten aan het feit dat React-componenten geen rechtstreeks toegang hebben tot globale objecten.
- React vermijdt rechtstreekse toegang tot globale objecten vanwege encapsulatie, prestaties, toestandsbeheer, enz., en gebruikt centrale toestandsbeheerbibliotheken zoals Redux om de datastroom te regelen.
- In tegenstelling tot Vue geeft React een gevoel van vrijheid in termen van mapstructuren en hooks, maar dit kan voor beginnende ontwikkelaars juist moeilijk zijn. Het is een goed idee om kennis te maken met React via toy-projecten.
- Probleem
- Oplossing
- Reden
- Gedachten
Probleem
Tijdens het integreren van de Kakao Map API in een React 18-, create-react-app-omgeving, werd de kaart niet gerenderd!
Ik had een script-tag in de head-tag ingevoegd, dus ik dacht dat het zou worden geladen voordat de browser gerenderd werd.
** Ik heb de HTML gemaakt, maar het is niet zichtbaar! **
~ Ongeveer de code om Kakao Map te laden in de head-tag van 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 laden Maar in de console stond alleen 'kakao is not defined' en er werd niets gerenderd.
Oplossing
Basis: React-componenten hebben geen directe toegang tot globale objecten.
Oplossing 1-1
Declareer het kakao-attribuut buiten de component-functie als een globaal object.
const { kakao } = window;
function Map() {
//...Oplossing 1-2
Maak een aparte custom hook voor de functies die nodig zijn om de Kakao Map te renderen.
//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>
)
Drag-events, klik-events, marker-handeling en andere functies die normaal gesproken nodig zijn voor de kaart,
zijn beter te implementeren in een custom hook dan in de component zelf.
Dit is beter voor herbruikbaarheid en leesbaarheid.
Reden
De reden waarom React geen toegang heeft tot globale objecten - je moet het concept van React begrijpen.
1) Inkapseling en modulariteit
- Elke component moet onafhankelijk en herbruikbaar zijn. Als alle componenten afhankelijk zijn van globale objecten, verliest de onafhankelijkheid en wordt het heel complex.
2) Prestaties en gemakkelijk onderhoud
- React rendert opnieuw wanneer de toestand verandert, maar globale objecten zijn niet geschikt om toestandsveranderingen bij te houden.
3) Toestandsbeheer centraal
- Gebruik een centraal toestandsbeheer-bibliotheek zoals Redux als je toch variabelen wilt delen.
Centraal -> regel de datastroom naar de componenten om fouten te voorkomen en het onderhoud te vereenvoudigen.
* Server-side rendering
Server-side rendering wordt tegenwoordig veel gebruikt voor SEO (zoekmachine-optimalisatie), maar window-objecten zijn niet toegankelijk vanaf de server!
Gedachten
Dit zijn de lessen die ik heb geleerd tijdens mijn eerste React-project.
Ik heb meer dan 2 jaar ervaring met Vue, maar ik was behoorlijk in de war toen ik met React begon en
de Kakao Map niet kon laten werken...!!!
React voelt wat losser aan dan Vue in termen van mapstructuur en hooks, wat het zelfs moeilijker maakt.
Ik denk veel na over de meest efficiënte manier om te schrijven.
Ik moet dit speelgoedproject, zoals de naam al zegt, als een speelgoed beschouwen en er meer mee leren.
* Dit is mijn eerste blog, maar durumis is heel uniek en leuk.
Ze geven je zelfs een 3-punts samenvatting die Koreanen leuk vinden ㅋㅋ
Zou je niet ook buitenlandse ontwikkelaars kunnen ontmoeten?
De code-editor kan een beetje verbeterd worden.
Ik sta open voor discussie en kritiek!
Geniet van je dag!
