React - kakao is not defined cách giải quyết tốt nhất

• Vấn đề
• Giải pháp
• Lý do
• Cảm nghĩ
  
  
  

Vấn đề

Trong quá trình tích hợp API bản đồ Kakao vào môi trường React 18, create-react-app, bản đồ không được hiển thị!

Tôi đã chèn thẻ script vào thẻ head, vì vậy tôi nghĩ rằng nó sẽ được tải trước khi trình duyệt hiển thị.

**Tôi đã viết HTML nhưng nó không hiển thị!!**

~Tóm tắt mã gọi bản đồ Kakao trong thẻ head của index.html~

Tuy nhiên, trên console chỉ ghi'kakao is not defined'và không có gì được hiển thị.

Giải pháp

Cơ bản: Thành phần React không truy cập trực tiếp vào đối tượng toàn cục.

Giải pháp 1-1

Khai báo lấy thuộc tính kakao từ đối tượng toàn cục bên ngoài hàm thành phần.

Giải pháp 1-2

Viết các hàm cần thiết để hiển thị bản đồ Kakao thành một hook tùy chỉnh riêng biệt.

Các chức năng thường được sử dụng của bản đồ như

sự kiện kéo thả, sự kiện nhấp chuột, xử lý đánh dấu...

thường tốt hơn khi

tách chúng ra thành các hook tùy chỉnh thay vì triển khai trực tiếp trong thành phần,

về mặt khả năng tái sử dụng và khả năng đọc.

Lý do

Cần phải hiểu khái niệm của React để hiểu lý do tại sao React không truy cập vào đối tượng toàn cục.

1) Ưu tiên đóng gói và tính mô-đun

- Mỗi thành phần phải độc lập và có thể tái sử dụng. Nếu nhiều thành phần phụ thuộc vào đối tượng toàn cục, tính độc lập sẽ bị mất và nó sẽ trở nên cực kỳ phức tạp.

2) Hiệu năng và bảo trì dễ dàng

- React thực hiện render lại khi trạng thái thay đổi, và đối tượng toàn cục không phù hợp để theo dõi các thay đổi trạng thái.

3) Quản lý trạng thái tập trung

- Tuy nhiên, nếu bạn muốn chia sẻ nhiều biến, hãy sử dụng thư viện quản lý trạng thái tập trung như Redux.

Tập trung -> Kiểm soát luồng dữ liệu đến thành phần để tránh lỗi và dễ bảo trì.

* Hiển thị ở phía máy chủ

Gần đây, việc hiển thị ở phía máy chủ đang được sử dụng rộng rãi để tối ưu hóa SEO (tối ưu hóa công cụ tìm kiếm), nhưng đối tượng window không thể truy cập được ở phía máy chủ!!

Cảm nghĩ

Đây là những thử thách mà tôi đã gặp phải trong dự án React đầu tiên của mình.

Tôi đã làm việc với Vue trong hơn 2 năm, nhưng khi bắt đầu dự án React,

tôi đã khá bối rối khi không thể hiển thị bản đồ Kakao...!!!

So với Vue, React có cấu trúc thư mục và hook linh hoạt hơn, vì vậy nó thực sự khó hơn.

Tôi phải suy nghĩ rất nhiều về cách viết hiệu quả.

Tôi cần phải làm quen với nó nhiều hơn bằng cách sử dụng nó như một dự án đồ chơi, đúng như tên gọi của nó.

* Đây là lần đầu tiên tôi viết blog, và tôi thấy durumis (두루미스) khá độc đáo và thú vị.

Nó cũng cung cấp tóm tắt 3 dòng mà người Hàn Quốc yêu thích nữa ㅋㅋ

Tôi có thể gặp gỡ các nhà phát triển nước ngoài không?

Trình chỉnh sửa mã nên được cải thiện một chút.

Tôi hoan nghênh sự trao đổi ý kiến ​​và chỉ dẫn ~!

Chúc bạn có một ngày tốt lành!