To jest post przetłumaczony przez AI.
Wybierz język
Tekst podsumowany przez sztuczną inteligencję durumis
- Problem z renderowaniem mapy w środowisku React 18 z create-react-app podczas integracji API mapy Kakao wynika z braku bezpośredniego dostępu komponentów Reacta do obiektów globalnych.
- React, aby zapewnić kapsułkowanie, wydajność i zarządzanie stanem, unika bezpośredniego dostępu do obiektów globalnych i korzysta z bibliotek do zarządzania centralnym stanem, takich jak Redux, aby kontrolować przepływ danych.
- W przeciwieństwie do Vue, React oferuje większą swobodę w strukturze folderów, hookach itp., co dla początkujących programistów może być wyzwaniem. Dobrym rozwiązaniem jest zaznajomienie się z nim poprzez projekty demonstracyjne.
- Problem
- Rozwiązanie
- Przyczyna
- Uwagi
Problem
Podczas integrowania interfejsu API mapy Kakao w środowisku React 18, create-react-app, mapa nie została renderowana!
Zakładałem, że ponieważ tag skryptu został wstawiony do tagu head, zostanie załadowany przed renderowaniem przeglądarki.
** Napisałem kod HTML, ale go nie widać!!
~W przybliżeniu kod ładujący mapę Kakao w tagu head pliku 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(() => {
// załadowanie mapy Jednak w konsoli została zapisana tylko wiadomość „kakao is not defined” i nic nie zostało renderowane.
Rozwiązanie
Podstawy: Komponenty Reactu nie uzyskują bezpośredniego dostępu do globalnych obiektów.
Rozwiązanie 1-1
Zdefiniuj atrybut kakao z globalnego obiektu poza funkcją komponentu.
const { kakao } = window;
function Map() {
//...Rozwiązanie 1-2
Utwórz oddzielny niestandardowy hook dla funkcji potrzebnych do renderowania mapy Kakao.
//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>
)
Zdarzenia przeciągania, kliknięcia, obsługi znaczników itp., które są powszechnie używane w mapach,
zamiast implementować w komponentach,
lepiej jest je wydzielić do niestandardowych hooków ze względu na użyteczność i czytelność.
Przyczyna
Musisz zrozumieć koncepcję Reactu, aby zrozumieć, dlaczego React nie uzyskuje dostępu do globalnych obiektów.
1) Kapsułkowanie i modułowość
- Każdy komponent powinien być niezależny i nadający się do ponownego użycia. Jeśli wiele komponentów będzie zależnych od globalnego obiektu, utraci niezależność, a kod będzie niezwykle złożony.
2) Wydajność i łatwość konserwacji
- React renderuje ponownie, gdy zmienia się stan, a globalne obiekty nie są odpowiednie do śledzenia zmian stanu.
3) Zarządzanie stanem jest scentralizowane
- Jeśli nadal chcesz udostępniać wiele zmiennych, użyj biblioteki do centralnego zarządzania stanem, takiej jak Redux.
Środek -> sterowanie przepływem danych do komponentów, aby uniknąć błędów i ułatwić konserwację.
* Renderowanie po stronie serwera
W ostatnim czasie renderowanie po stronie serwera jest często używane w celu optymalizacji SEO (optymalizacji pod kątem wyszukiwarek), ale obiekt window nie jest dostępny po stronie serwera!!
Uwagi
To były próby i błędy, które napotkałem podczas mojego pierwszego projektu React.
Pracowałem nad Vue przez ponad 2 lata, ale podczas rozpoczynania projektu React,
byłem bardzo zdezorientowany, że nie mogłem wyświetlić mapy Kakao...!!!
W porównaniu z Vue struktura folderów, hooki itp. wydają się być bardziej swobodne, co czyni je bardziej złożonymi.
Dużo myślę o tym, jak napisać kod w sposób wydajny.
Muszę ćwiczyć więcej z projektami typu zabawka, aby się z tym zapoznać.
* To mój pierwszy blog, a durumis jest dość unikalny i zabawny.
Jest też podsumowanie w 3 zdaniach, które lubią Koreańczycy, haha.
Czy nie można by spotkać zagranicznych programistów?
Edytor kodu mógłby zostać trochę ulepszony.
Zapraszam do wymiany opinii i sugestii~!
Miłego dnia!
