Data Binding ใน React: เข้าใจการเชื่อมโยงข้อมูลกับ UI

Data Binding คือการเชื่อมโยงข้อมูลระหว่างตัวแปร (state, props) กับ UI ใน React จะเป็นแบบ one-way data binding (ข้อมูลไหลจาก state/props ไป UI)

---

1. One-way Data Binding

ค่าจาก state หรือ props จะถูกส่งไปแสดงผลใน UI

function Welcome() {
  const name = "Alice";
  return <h1>สวัสดี {name}</h1>;
}

---

2. การ binding state กับ input (Two-way Data Binding แบบ Controlled Component)

React ไม่มี two-way data binding แบบอัตโนมัติ แต่เราทำได้โดยใช้ state ควบคุมค่า input

import { useState } from "react";

function NameInput() {
  const [name, setName] = useState("");
  return (
    <div>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
        placeholder="กรอกชื่อ"
      />
      <p>คุณกรอก: {name}</p>
    </div>
  );
}

อธิบาย:

• value={name} binding ค่า state กับ input
• onChange จะอัปเดต state เมื่อผู้ใช้กรอกข้อมูล

---

3. การ binding ข้อมูลจาก parent (props)

function Greeting({ user }) {
  return <h2>ยินดีต้อนรับ {user}</h2>;
}

// ใช้งาน
<Greeting user="Bob" />;

---

4. Best Practices

• ใช้ state ควบคุม input เสมอ (controlled component)
• อย่าเปลี่ยนแปลง props โดยตรง
• ข้อมูลควรไหลจาก parent → child เท่านั้น

---

สรุป

Data binding ใน React ช่วยให้ UI และข้อมูลสอดคล้องกันตลอดเวลา เข้าใจหลักการนี้จะช่วยให้เขียน React ได้อย่างมั่นใจและแก้บั๊กได้ง่ายขึ้น