การสร้าง UI ด้วย React (IV) - ใช้ปีกกาใน JSX
Published: 2024-02-28 01:57:59

JSX ช่วยให้เราเขียนภาษาที่เหมือน HTML ในไฟล์ JavaScript โดยรวมการทำงานและเนื้อหาเอกสารไว้ด้วยกัน หากเราต้องการใส่ค่าที่มีการเปลี่ยนแปลงได้ในเนื้อหา เราสามารถใช่ ปีกกา เพื่อใช้แสดงข้อมูลได้ใน JSX ได้

---

ในซีรีย์นี้:
- [การสร้าง React Component](https://dev.to/21aki/kaarsraang-ui-dwy-react-i-kaarsraang-react-component-29no)
- [Import และ Export Component](https://dev.to/21aki/kaarsraang-ui-dwy-react-ii-import-aela-export-component-pge)
- [เขียน JSX](https://dev.to/21aki/kaarsraang-ui-dwy-react-iii-kaarekhiiyn-jsx-484h)
- **ใช้ ปีกกา ใน JSX**
- ส่งค่าผ่าน Props
- การแสดง Component แบบมีเงื่อนไข (Conditional Rendering)
- การแสดงข้อมูลเป็น List
- แยก Component (สร้าง Pure Component)
- มอง UI ให้เป็นแผนภูมิต้นไม้ (Tree Structure)

---

### ใช้ตัวแปรแทน string

เมื่อเราต้องการใส่ค่าที่เป็น string ใน attribute ของ JSX เราสามารถใช้ได้ทั้ง single (`'`) หรือ double quote (`"`)

```jsx
export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}
```


จะเห็นว่า "https&#58;//i.imgur.com/7vQD0fPs.jpg" และ "Gregorio Y. Zara" เป็นค่า string ที่ถูกใส่ใน attribute

หากเราต้องการให้ค่าสามารถเปลี่ยนแปลงได้ เราสามารถกำหนดให้มันเป็นตัวแปร และ**เปลี่ยน `"` และ `"` เป็น `{` และ `}`**

```jsx
export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}
```

### ใช้ปีกกา: เปิดใช้งาน JavaScript
ใน JSX เราสามารถเรียกใช้งาน JavaScript ได้ โดยการใส่คำสั่ง JavaScript ในปีกกา `{ }`. เช่น หากเราต้องการใช้ตัวแปร `name` ใน `<h1>` สามารถทำได้ตามตัวอย่างดังนี้:

```jsx
export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}
```

ทั้งนี้สามารถใส่คำสั่ง JavaScript แบบอื่นๆ เช่นตัวอย่างคือฟังค์ชั่น `formatDate()` ก็ได้:

```jsx
const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}
```

### ใช้ปีกกาตอนไหน
เราสามารถใช้ปีกกาใน JSX ได้ 2 วิธีได้แก่:

1. ใช้เป็นข้อความ โดยใส่เข้าไปในแท็กของ JSX โดยตรง: 
    - ✅ `<h1>{name}'s To Do List</h1>` ใช้งานได้
    - ❌ `<{tag}>Gregorio Y. Zara's To Do List</{tag}> ` ไม่ทำงาน

2. ใช้เป็น Attribute หลังเครื่องหมาย `=`: 
    - ✅ `src={avatar}` จะเป็น<u>การแทนค่า</u>ตัวแปร `avatar` ใน src
    - ❌ `src="{avatar}"` จะเป็นการใช้ string `"{avatar}"`

### ใช้ปีกกาสองชั้น: สำหรับ CSS และ Object ใน JSX

หากเราต้องการส่ง Object เช่น `{ name: "Hedy Lamarr", inventions: 5 }` เป็นค่าใน Attribute ของ JSX สามารถส่งเป็นค่าได้ดังนี้ `person={{ name: "Hedy Lamarr", inventions: 5 }}`

กรณีเดียวกับการใส่ CSS ใน JSX สามารถใส่ Object ของ CSS ใน attribute `style` ได้:

{% codesandbox 6twv9v %}

> ⚠️ ผิดกันง่ายๆ
> property  ของ css จะต้องเป็น camelCase. เช่นหาก HTML `<ul style="background-color: black">` จะต้องเขียนเป็น `<ul style={{ backgroundColor: 'black' }}>`.

### วิธีใช้ Object ในปีกกาแบบอื่นๆ

{% codesandbox react-dev-vppdcf %}

จากตัวอย่าง สังเกตุว่า Object `person` มี string `name` และ object `theme`:

```jsx
const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};
```

ซึ่งเราสามารถนำค่าของ `person` ไปใช้ใน Component เช่นดังตัวอย่าง:

```jsx
<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>
```

### สรุป 
- หากเราใช้ `"` ครอบข้อความใน attribute ของ JSX จะเป็นการส่งค่า string.
- แต่ถ้าเราใช้ ปีกกา จะเป็นการแทนค่าของ JavaScript เพื่อกำหนดเงื่อนไข หรือ แสดงค่านั้นๆ แทนได้.
- `{{` และ `}}` ไม่ใช่คำสั่งพิเศษ: แต่เป็นการซ้อน Object ของ JavaScript เพื่อส่งค่าไปยังปีกกาของ JSX.