Ini adalah postingan yang diterjemahkan oleh AI.
Pilih Bahasa
Teks yang dirangkum oleh AI durumis
- Masalah yang terjadi saat mengintegrasikan API Kakao Map di lingkungan React 18, create-react-app, dan peta tidak dirender, adalah karena komponen React tidak mengakses objek global secara langsung.
- React tidak mengakses objek global secara langsung untuk alasan enkapsulasi, kinerja, dan manajemen status, dan menggunakan perpustakaan manajemen status terpusat seperti Redux untuk mengontrol aliran data.
- Berbeda dengan Vue, React memberikan rasa kebebasan dalam hal struktur folder dan hook, tetapi bagi pengembang yang baru mengenal React, ini bisa jadi sulit. Sebaiknya biasakan diri dengan React melalui proyek mainan.
- Masalah
- Solusi
- Alasan
- Refleksi
Masalah
Saat mengintegrasikan Kakao Map API dalam lingkungan React 18, create-react-app, peta tidak dirender!
Saya telah menyisipkan tag skrip di dalam tag kepala, jadi saya berasumsi bahwa tag tersebut akan dimuat sebelum browser merendernya.
**Saya telah menulis HTML, tetapi tidak ditampilkan!!**
~Kira-kira kode yang memanggil Kakao Map di dalam tag kepala 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(() => {
// memuat peta Namun, di konsol, hanyakakao is not defined yang direkam tidak ada yang dirender.
Solusi
Dasar: Komponen React tidak mengakses objek global secara langsung.
Solusi 1-1
Deklarasikan atribut kakao dari objek global di luar fungsi komponen.
const { kakao } = window;
function Map() {
//...Solusi 1-2
Buat fungsi yang diperlukan untuk merender Kakao Map sebagai hook khusus.
//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>
)
Event drag, klik, handling marker, dan fungsi umum lainnya yang diperlukan peta
lebih baik dipisahkan sebagai hook khusus daripada diimplementasikan di dalam komponen,
baik dari segi reusability maupun readability.
Alasan
Alasan mengapa React tidak mengakses objek global - Anda perlu memahami konsep React.
1) Enkapsulasi dan Modularitas
- Setiap komponen harus independen dan dapat digunakan kembali. Ketergantungan pada objek global di banyak komponen akan menghilangkan independensi dan menjadi sangat rumit.
2) Performa dan Perawatan yang Mudah
- React akan melakukan render ulang saat keadaan berubah, dan objek global tidak cocok untuk melacak perubahan keadaan.
3) Manajemen Keadaan dipusatkan
- Namun, jika Anda ingin berbagi banyak variabel, gunakan library manajemen keadaan terpusat seperti Redux.
Pusat -> mengontrol aliran data ke komponen untuk menghindari kesalahan dan memudahkan perawatan.
* Render Sisi Server
Saat ini, Render Sisi Server banyak digunakan untuk SEO (Optimasi Visibilitas Mesin Pencari), tetapi objek window tidak dapat diakses di sisi server!!
Refleksi
Ini adalah cobaan dan kesalahan yang saya alami saat mengerjakan proyek React pertama saya.
Saya telah mengerjakan vue selama lebih dari 2 tahun, tetapi ketika saya mulai mengerjakan proyek React,
Saya sangat bingung karena saya tidak dapat menampilkan Kakao Map...!!!
Vue terasa sedikit lebih bebas dibandingkan dengan React dalam hal struktur folder dan hook, yang menjadikannya lebih sulit.
Saya banyak berpikir tentang cara menulisnya secara efisien.
Saya harus lebih banyak berlatih dengan proyek mainan, seperti namanya.
* Ini adalah blog pertama saya, dan durumis sangat unik dan menyenangkan.
Ini juga memberikan ringkasan 3 baris yang disukai orang Korea, haha.
Mungkinkah kita bertemu pengembang luar negeri di sini?
Semoga editor kode sedikit ditingkatkan.
Selamat datang untuk berbagi pendapat dan kritik~!
Semoga harimu menyenangkan!
