React - kakao is not defined แก้ไขปัญหานี้อย่างไรดี

• ปัญหา
• การแก้ไข
• สาเหตุ
• ความรู้สึก
  
  
  

ปัญหา

ระหว่างการเชื่อมต่อ Kakao Map API ในสภาพแวดล้อม React 18 และ create-react-app แผนที่ไม่แสดงผล!

เนื่องจากแท็กสคริปต์ถูกแทรกไว้ในแท็ก head ฉันจึงคิดว่ามันจะโหลดก่อนที่เบราว์เซอร์จะแสดงผล

**เขียน HTML แล้วแต่ไม่แสดงผลเลย!**

~ประมาณว่าโค้ดที่เรียกใช้ Kakao Map ในแท็ก head ของ index.html~

แต่ในคอนโซลมีเพียง 'kakao is not defined' เท่านั้นที่บันทึกไว้และไม่มีอะไรแสดงผลเลย

การแก้ไข

พื้นฐาน: องค์ประกอบของ React ไม่เข้าถึงออบเจ็กต์ระดับโลกโดยตรง

วิธีแก้ไข 1-1

ประกาศตัวแปร 'kakao' จากออบเจ็กต์ระดับโลกนอกฟังก์ชันองค์ประกอบ

วิธีแก้ไข 1-2

สร้างฟังก์ชันที่จำเป็นในการแสดงผล Kakao Map เป็น Custom Hook แยกต่างหาก

โดยทั่วไป ฟังก์ชันที่จำเป็นสำหรับแผนที่ เช่น เหตุการณ์การลาก เหตุการณ์การคลิก และการจัดการเครื่องหมาย

แทนที่จะฝังไว้ในองค์ประกอบ

การแยกเป็น Custom Hook จะดีกว่าทั้งในแง่ของการนำกลับมาใช้ใหม่และการอ่าน

สาเหตุ

จำเป็นต้องเข้าใจแนวคิดของ React เกี่ยวกับเหตุผลที่ React ไม่เข้าถึงออบเจ็กต์ระดับโลก

1) การห่อหุ้มและโมดูลาร์

- องค์ประกอบแต่ละส่วนควรเป็นอิสระและสามารถนำกลับมาใช้ใหม่ได้ หากองค์ประกอบจำนวนมากขึ้นอยู่กับออบเจ็กต์ระดับโลก มันจะทำให้สูญเสียความเป็นอิสระและซับซ้อนมากขึ้น

2) ประสิทธิภาพและการบำรุงรักษาที่ง่าย

- React จะแสดงผลซ้ำเมื่อสถานะเปลี่ยนแปลง ออบเจ็กต์ระดับโลกไม่เหมาะสำหรับการติดตามการเปลี่ยนแปลงสถานะ

3) การจัดการสถานะจากส่วนกลาง

- อย่างไรก็ตาม หากต้องการแชร์ตัวแปรหลายตัว ให้ใช้ไลบรารีจัดการสถานะส่วนกลาง เช่น Redux

ส่วนกลาง -> ควบคุมการไหลของข้อมูลไปยังองค์ประกอบเพื่อหลีกเลี่ยงข้อผิดพลาดและทำให้การบำรุงรักษาง่ายขึ้น

* การแสดงผลแบบ Server-Side

เมื่อเร็วๆ นี้ การแสดงผลแบบ Server-Side ถูกนำมาใช้กันอย่างแพร่หลายเพื่อเพิ่มประสิทธิภาพ SEO (การปรับให้เหมาะสมกับเครื่องมือค้นหา) แต่ไม่สามารถเข้าถึงออบเจ็กต์ window จากฝั่งเซิร์ฟเวอร์ได้!!

ความรู้สึก

นี่คือปัญหาที่ฉันพบเจอระหว่างการพัฒนา React Project ครั้งแรกของฉัน

ฉันทำงานกับ Vue มาแล้วกว่า 2 ปี แต่เมื่อเริ่มโครงการ React

ฉันรู้สึกงงมากที่ไม่สามารถแสดงผล Kakao Map ได้...!!!

เมื่อเทียบกับ Vue โครงสร้างโฟลเดอร์และ Hook ดูเหมือนจะมีอิสระมากกว่า ทำให้รู้สึกยากขึ้น

ฉันต้องคิดหนักว่าจะเขียนอย่างไรให้มีประสิทธิภาพ

ฉันต้องฝึกฝนเพิ่มเติมผ่าน Toy Project เหมือนกับของเล่นจริงๆ

* บล็อกนี้เป็นครั้งแรกของฉัน และฉันรู้สึกว่า 'durumis' (ดูรูมิส) นั้นค่อนข้างแปลกใหม่และสนุก

และยังมีสรุป 3 บรรทัดที่คนไทยชอบอีกด้วย ㅋㅋ

ฉันหวังว่าจะได้พบกับนักพัฒนาจากต่างประเทศด้วย

แต่ตัวแก้ไขโค้ดควรได้รับการปรับปรุงบ้าง

ยินดีรับฟังความคิดเห็นและคำติชม!~

ขอให้ทุกท่านมีความสุขในแต่ละวัน!