การสร้าง UI ด้วย React (II) - Import และ Export Component
Tags: beginners, react, webdev
Published: 2024-02-27 06:04:23

Components ถูกสร้างมาเพื่อใช้ซ้ำ แต่เมื่อสร้างไปแล้ว โค้ดอาจจะยาวไปและจัดการยาก การแบ่งเป็นหลายๆ ไฟล์จะทำให้ง่ายต่อการจัดการและใช้ซ้ำได้ง่าย.

---

ในซีรีย์นี้:
- [การสร้าง React Component](https://dev.to/21aki/kaarsraang-ui-dwy-react-i-kaarsraang-react-component-29no)
- **Import และ Export Component**
- [เขียน 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)

---

### ไฟล์ Component หลัก
จาก [การสร้าง React Component](https://dev.to/21aki/kaarsraang-ui-dwy-react-i-kaarsraang-react-component-29no) เราจะได้โค้ดแบบนี้

{% codesandbox xgy8t9 %}

แต่โค้ดทั้งหมดจะอยู่ใน `App.js` ซึ่งเป็นไฟล์ Component หลักของโปรแกรม โดยชื่อไฟล์จะขึ้นอยู่กับวิธีการตั้งค่า และ Framework ที่ใช้

### Exporting และ importing ตัว component

เพื่อให้ง่ายต่อการจัดการ เราสามารถแบ่ง ขั้นตอนการแยก Component `Gallery` และ `Profile` ออกจาก ไฟล์ Component หลักได้ ดังนี้:

1. **สร้าง**ไฟล์ JS ใหม่ เพื่อใส่ Components
2. **Export** ฟังค์ชั่นจากไฟล์ (สามารถใช้ได้ทั้ง export `default` หรือ ตาม `ชื่อฟังค์ชั่น` ก็ได้)
3. **Import** ในไฟล์ที่ต้องการใช้ Component (ตามฟังค์ชั่นที่ทำไว้)

ตัวอย่าง การ `Gallery` และ `Profile` ออกจาก `App.js` ไปยังไฟล์ใหม่ `Gallery.js`

{% codesandbox react-dev-nfmfwy %}

จากตัวอย่างสามารถแจกแจงเป็น 2 ไฟล์ Component:

1. `Gallery.js`:
    - การประกาศ `Profile` Component ที่ใช้เฉพาะในไฟล์เดียวกัน จึงไม่จำเป็นต้อง export
    - Export `Gallery` Component เป็น `default`

2. `App.js`:
    - Import `Gallery` ที่เป็น `default`
    - Export `App` ที่เป็น Component หลักของโปรแกรม ให้เป็น `default`.


> **📝 ข้อสังเกตุ**
> สังเกตุว่าเราสามารถละ `.js` ออกจากชื่อไฟล์ได้:
> ```jsx
> import Gallery from './Gallery';
> ```
> ใน React สามาถใช้งานได้ทั้ง './Gallery.js' หรือ './Gallery'.

### การ Export และ Import หลายๆ Component จาก ไฟล์เดียวกัน

หากเราต้องการใช้ เฉพาะ `Profile` แทน `Gallery` เราสามารถทำได้ 2 แบบ คือ สร้างไฟล์ใหม่แล้ว export แบบ `default ` ให้ `Profile` หรือ เราสามารถใส่ `export` หน้าชื่อฟังค์ชั่น (Name) เพื่อมาใช้ต่อได้เลย 

**แต่ `default export` สามารถใช้ได้ 1 ครั้งต่อ 1 ไฟล์ เท่านั้น**

> **📝 ข้อสังเกตุ**
> เพื่อลดความสับสันที่อาจจะเกิดขึ้น บางทีมพัฒนาเลือกที่จะใช้การ export default หรือ export ชื่อฟังค์ชั่น แบบใดแบบ เพียงหนึ่งแบบเดียว

**ขั้นตอนการ export แบบชื่อฟังค์ชั่น (Name):**

เริ่มจาก **export** `Profile` จาก `Gallery.js` โดยการใส่ export หน้าชื่อฟังค์ชั่น (ไม่ใช้ `default`):

```jsx
export function Profile() {
  // ...
}
```

จากนั้น, **import** `Profile` จาก `Gallery.js` ใน `App.js` โดย import ด้วยชื่อฟังค์ชั่น (ใช้ ปีกกาครอบ):

```jsx
import { Profile } from './Gallery.js';
```

สุดท้าย, สั่ง render `<Profile />` ใน App:

```jsx
export default function App() {
  return <Profile />;
}
```

โดยจะออกมาหน้าตาแบบนี้: 

{% codesandbox react-dev-5qcqj6 %}

ตอนนี้ เราจะเข้าใจการใช้ exports แบบ default และ ชื่อฟังค์ชั่น (name) ทั้งสองแบบแล้ว:

- `Gallery.js`:
    - `Profile` เป็นการ **Exports** Component **แบบ ชื่อฟังค์ชั่น (name)** `Profile`.
    - `Gallery` เป็นการ **Exports** Component **แบบ default**.
- `App.js`:
    - `Profile` เป็นการ **Imports** Component **แบบ ชื่อฟังค์ชั่น** `Profile` จาก `Gallery.js`.
    - `Gallery` เป็นการ **Imports** Component **แบบ default** จาก `Gallery.js`.
    - `App` เป็นการ **Exports** Component หลักของโปรแกรม **แบบ default**

### สรุป
- ไฟล์ component หลักของโปรแกรมคืออะไร
- import และ export ตัว componentได้ยังไง
- เราควรใช้ default และ imports และ exports แบบไหน เมื่อไหร่
- วิธี export components หลายตัวพร้อมกันจากไฟล์เดียวกัน