07 - React + API: จากฟอร์มค้นหา สู่ข้อมูลจริงด้วย fetch() และ async/await

React ไม่ได้รู้ข้อมูลทุกอย่างในโลก แล้วแอปของเราจะเอาข้อมูลจริงมาจากที่ไหน ตอนนี้เราจะพา React App ออกไปคุยกับระบบภายนอกผ่าน API เป็นครั้งแรก ผ่านโจทย์ Movie Finder เริ่มจากมองภาพ Software System ให้กว้างขึ้น ว่า Frontend, Backend และ Database ต่างมีหน้าที่ของตัวเอง จากนั้นเรียนรู้ว่า API คือข้อตกลงที่ให้ Software คุยกัน ผ่านการส่ง Request และรับ Response กลับมา เราจะส่ง Request ด้วย fetch() แล้วเปิด DevTools → Network ดูของจริงว่า Server ตอบ Status อะไรกลับมา และเข้าใจว่า JSON คือ Data ไม่ใช่ UI โดย React เป็นผู้เปลี่ยน Data ให้กลายเป็น Movie Card บนหน้าจอ เพราะโลกภายนอกต้องใช้เวลา เราจึงใช้ async/await รอผล แล้วเก็บข้อมูลลง State ให้ React Re-render ปิดท้ายด้วยการออกแบบ UI ให้รองรับ Loading, Success, Empty และ Error แบบ Production Software จริง